Question

我有两个区块，一个是“只能拖拽”，另一个是“仅可投放”。

在第一个中我有一些图像，我可以将它们拖放到第二个图像中。

将图像从第一个块拖放到第二个块后，我想用更大的图像替换掉落的图像。

我正在考虑使用replaceWith()方法，但问题是还要替换父元素。

例如，我在“只有可拖动”中有这个：

<li class="draggable ui-draggable ui-draggable-handle" id="header-1">
 <img src="http://placehold.it/150x100">
</li>

从“仅可放置”中拖出元素后，

并在“仅可放置”中：

<img src="http://placehold.it/400x300">

正如您所注意到replaceWith()也在替换父元素，我不想这样做。

此外，我还需要根据拖动的项目动态添加图片。

现在，就像这样：

$('.testing').replaceWith('<img src="http://placehold.it/400x300">');

这将替换每个具有相同图像的项目，我不希望这样。每个项目都应该拥有自己的图像。

这是“仅限可拖动”的JS代码：

$(".draggable").draggable({
     connectToSortable: '.sortableList',
     cursor: 'pointer',
     helper: 'clone',
     revert: 'invalid',
     start: function (event, ui) {
         $(this).addClass('testing');
     }
 });

这是“只能放弃”：

$(".sortableList").sortable({
     receive: function (event, ui) {
         //alert('It works');
         $('.testing').replaceWith('<img src="http://placehold.it/400x300">');
     }
 });

这是一个JSBIN（更多的“标题”，并且将图像拖放到右边的容器中）

Answer 1

将addClass（＆＃34; testing＆＃34;）置于可排序方法的内部函数中，而不是在draggable方法的内部启动，它应该工作

$(".sortableList").sortable({
     receive: function (event, ui) {
         //alert('It works');
           $(this).addClass('testing');
         $('.testing').replaceWith('<img src="http://placehold.it/400x300">');
     }
 });



 $(".draggable").draggable({
     connectToSortable: '.sortableList',
     cursor: 'pointer',
     helper: 'clone',
     revert: 'invalid',
     start: function (event, ui) {
       //Not here
     }
 });

Jsbin

Check the Updated Working Fiddle

jQuery UI可排序 - 在drop上动态更改内容

1 个答案: