在jquery中拖动元素时显示自定义图像

我正在使用JQuery UI来拖放树节点并且工作正常。

我需要根据更多的用户交互来即兴表达。当我拖动任何元素时它显示相同的元素名称，你可以在图像中看到（测试3我已经拖到了下面）。

但我的要求是当我拖动任何树节点时，它应该显示指定的图像，而不是相同的文本。 可能吗？

我的可拖动function如下，我需要做些什么改变才能达到要求。

$("li a").draggable({ revert: "invalid", containment: "document", helper: "clone", cursor: "move", start: function(event, ui) { var draggedId = event.target.id; } }); 

Answer 1

如建议的那样，你可以做一个特别的帮手。 这是一个有效的例子： https ： //jsfiddle.net/Twisty/ja1635y9/

HTML

 
 
Liabilities 
 
Test 0
 
Test 1
 
Test 2
 
Test 3
 
 
  

JQuery的

 $(function() { $(".sub a").draggable({ revert: "invalid", containment: "document", helper: function(e, ui) { var $img = $(this).attr("href"); var $d = $("
"); $d.css({ "width": "250px", "height": "48px", "background-image": "url(" + $img + ")", "background-repeat": "no-repeat", "padding": "12px 0" }); var $text = $("" + $(this).text() + ""); $text.css({ "display": "block", "color": "#fff", "text-align": "center", "width": "100%" }); $d.append($text); return $d; }, cursor: "move", start: function(event, ui) { var draggedId = event.target.id; } }).click(function(e) { e.preventDefault(); }); }); 

该函数创建一个div并设置背景，漂亮而整洁。 然后我将文本添加到内部的span ，因此我可以更轻松地定位它。 由于它被视为一个链接，我抑制了click事件。

Answer 2

使用helper：function（）。 它允许辅助元素用于拖动显示。

 helper: function() { return $("
").append($( '' )); } 

工作演示

参考