Question

我有一个jQuery UI可拖动，我已经尝试创建一个自定义帮助器，其中包含原始元素的一些但不是全部信息。

这是我的可拖动元素;

<ul>
  <li><div>Name</div> <span>12-12-2011</span></li>
  <li><div>Another name</div> <span>12-12-2011</span></li>
</ul>

和jQuery;

$("ul li").draggable(function(){
  helper: function(){
    return $("<div></div>");
  }
});

我们的想法是，在拖动时，用户将拥有一个仅包含名称但不包含时间元素的帮助程序。

我的实际代码比这更复杂，所以我真正想要的是任何选择器，它允许我选择原始元素或它的副本，然后做各种jQuery魔术（过滤元素，添加新元素，类等）

但是，对于我的生活，我无法找到这一点，可拖得糟透的文件，而#jquery的任何人都无法帮助我。有什么想法吗？

提前致谢！

Answer 1

首先，您调用draggable的方式有问题。期望参数是对象文字，而不是函数。

this是helper函数中当前拖动的元素。

拥有以下html

<ul>
  <li><div class="name">Name</div> <span>12-12-2011</span></li>
  <li><div class="name">Another name</div> <span>12-12-2011</span></li>
</ul>

你可以这样做：

$('ul li').draggable({
    helper: function() {
        //debugger;
        return $("<div></div>").append($(this).find('.name').clone());
    }
});

注意：为了选择它，我在表示名称的<div>中添加了类，但您可以找到其他任何方法。

这是一个jsfiddle供您检查。

Answer 2

好的，通过快速测试，以下内容将起作用....

$("ul li").draggable({
    helper: function() {
        return $("<div>hello</div>");
    } });

请注意，您没有将函数作为可拖动参数传递。另外，我在示例中添加了“hello”，因此帮助器DIV实际上包含了一些内容。

编辑：这似乎可以防止元素被丢弃，嗯......

A FIX ：不太漂亮，但这很有效，也许它可以提供一些改进的想法......

var remember;
$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        remember = $(this).html();
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html(remember);
    }
});

Example Here

如果你不喜欢“记住”变量的想法，似乎可以将自定义选项添加到可以保存原始html的可拖动对象......

$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        $(this).draggable("option", "olddata", $(this).html());
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html($(this).draggable("option", "olddata"));
    }
});

Answer 3

一种可能的解决方案是

小提琴：http://jsfiddle.net/SWbse/

   $(document).ready(function() {
      $("ul li").draggable({
         helper: 'clone',
         start: function(event, ui){
            ui.helper.children('span').remove();
         }    
     });
   });

jQuery UI Draggable的自定义帮助程序

3 个答案: