Jquery 如何在拖动元素时显示自定义HTML模板？

当我们拖动一个元素时，我们会看到该元素的重影图像，我们可以使用以下方法更改图像：

event.dataTransfer.setDragImage(image, xOffset, yOffset);

但是在我的例子中，我想显示一个带有一些信息的自定义HTML模板

---

如何做到这一点？

您可以使用JqueryUI实现这一点

请参见，并尝试拖动示例第一行的最后一个框

$( "#draggable3" ).draggable({
      cursor: "move",
      cursorAt: { top: -12, left: -20 },
      helper: function( event ) {
        return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
      }
    });

$（“#可拖动3”）.draggable({
光标：“移动”，
光标：{顶部：-12，左侧：-20}，
助手：函数（事件）{
return$（“我是定制助手”）；
}
});

你可以组合你可以组合我给你的。不是很确定，但如果你做一点点的眼睛，然后你可以解决它

    $( "#draggable3" ).draggable({
          connectToSortable: "#sortable",          
          cursor: "move",
          cursorAt: { top: -12, left: -20 },
          helper: function( event ) {
            return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
          }
        });

$（“#可拖动3”）.draggable({
connectToSortable:“#可排序”，
光标：“移动”，
光标：{顶部：-12，左侧：-20}，
助手：函数（事件）{
return$（“我是定制助手”）；
}
});

谢谢您的回复。但这不是拖放。它只是改变元素的X&Y坐标。使用这个我永远不会知道被拖动的元素在哪个元素上。我的要求是按拖放方式对列表进行排序。如何排序？你能给我举一些用这个排序的例子吗？