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

Question

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

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

但就我而言，我想展示一个包含一些信息的自定义 HTML 模板。

如何做到这一点？

Answer 1

您可以使用 JqueryUI 来实现这一点。

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

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

你可以结合你可以结合http://jqueryui.com/draggable/#sortable 和我给你的那个。不太确定，但是是的，如果你做一点护目镜，那么你可以解决它。

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