javascript - Jquery 将元素放入另一个元素之后

Question

我有几张图片和一些可以拖放到图片上的元素

<span name="imie" id="drag1" class="drag">
    <img name='aa' id='test' src="http://placehold.it/80x80/c9112d/fff&text=1" width="70px" height="20px" />
    </span>
    <span>Imię</span> 

<div class="col droppable">
    <div class="canvas">
        <img class="img-bg" src="test.jpg">
    </div>
    <div class="canvas">
        <img class="img-bg" src="test.jpg">
    </div>                    
</div>

我想在 <div class="canvas"> 中添加下拉框在 img 之后或之前.我想看到那个盒子在 img 上，但在代码中它应该在 canvas 里面不在之后这是我的脚本

 var counter = 0;
        var x = null;
        //Make element draggable
        $(".drag").draggable({
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit',
            revert: true
        });

        $(".droppable").droppable({
            accept: '.drag',
            activeClass: "drop-area",
            drop: function (e, ui) {
                if ($(ui.draggable)[0].id !== "") {


                    x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original',
                        cursor: 'move',
                        containment: '.droppable',
                        tolerance: 'fit',
                        drop: function (event, ui) {
                            $(ui.draggable).remove();
                        }
                    });


                    x.addClass('remove');

                    var el = $("<span><a href='Javascript:void(0)' class='xicon delete'                  title='Remove'</a>X</span>");
                    $(el).insertAfter($(x.find('img')));
                    x.appendTo('.droppable');
                    $('.delete').on('click', function () {
                        $(this).parent().parent('span').remove();
                    });
                    $('.delete').parent().parent('span').dblclick(function () {
                        $(this).remove();
                    });
                }
            }
        });

我想问题出在 x.appendTo('.droppable'); 中.但我无法处理它。以及整个在线示例HERE

Answer 1

你必须让你的 <div class="canvas"></div>可丢弃的不是<div class="col droppable"></div>

尝试:

HTML:

<div class="col ">
    <div class="canvas droppable">
        <img class="img-bg" src="http://formularze.iform.pl/zdjecia/formularze/4556/SF_sdfra.gif">
    </div>
    <div class="canvas droppable">
        <img class="img-bg" src="http://formularze.iform.pl/zdjecia/formularze/4556/SF_sdfra.gif">
    </div>                    
</div>

JS:

$(this).append(x);

DEMO

或者如果你想在 img 之前尝试:

$(this).prepend(x);

DEMO2