如何使jQuery可排序元素中的图像可拖动？

Question

我想知道那里有任何jQuery向导可以帮助我！

我有一个可排序的元素列表，它们将充当“photoshop”图层，在这些元素中有一个图像元素。

在我将图像放入Sortable元素之前，我可以将它拖到画布上并在那个位置绘制它，但现在当我拖动时，我拖动整个可排序元素。

<ul id = "layers">
<li class = "layer" id = "0">
<img draggable="true" ondragstart="drag(event)" id="imgnumber0" class="draggable-img" src="toolongtocopy!!">
</li>
<li class = "layer" id = "1">
<img draggable="true" ondragstart="drag(event)" id="imgnumber1" class="draggable-img" src="toolongtocopy!!">
</li>
</ul>

我的剧本：

 $(function() {
    $('#layerslist').sortable({

        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });

});

我想知道如何允许图像元素与可排序的li分开拖动？

谢谢！

Answer 1

您要找的是Handles。以这种方式指定句柄：

$( "#draggable" ).draggable({
  handle: "p"
});