Jquery把元素放在另一个里面(Jquery put element inside another not after)

Jquery把元素放在另一个里面(Jquery put element inside another not after)

我有一些图像和一些元素，我可以拖放图像

<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>

我想在img之后或之前在<div class="canvas">添加删除的框。 我想看到那个盒子在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'); 。 但我无法处理它。 整个例子在网上这里

I have a few images and some element which I can drag and drop on images

<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>

I want to add dropped box inside <div class="canvas"> after or before img. I want to see that box is on img but in code it should be inside canvas not after This is my script

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(); }); } } });

I suppose that problem is in x.appendTo('.droppable'); . But I can't handle with it. And whole example online HERE

最满意答案

你必须使<div class="canvas"></div> droppable而不是<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

You have to make your <div class="canvas"></div> droppable not the <div class="col droppable"></div>

Try:

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

Or if you want it before the img Try:

$(this).prepend(x);

DEMO2