jQuery UI Draggable 的自定义助手

Posted 2023-05-08

【中文标题】jQuery UI Draggable 的自定义助手

【英文标题】：Custom helper for jQuery UI Draggable

【发布时间】：2014-03-04 22:00:21

【问题描述】：

我有一个可拖动的 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 没有人会帮助我。有什么想法吗？

提前致谢！

【问题讨论】：

你要求元素也掉吗？我对答案的第一次尝试提供了与自定义拖动的其他结果相同的结果，但不允许丢弃。所以我也找到了一个解决方法。您不需要实际移动原始元素吗？

我不需要移动原始元素，我正在寻找的是一种自定义的克隆。

嘿，我想知道在那之后你如何重新定位你的自定义克隆？例如，我有一个 500x200 的元素，并且在拖动它时我需要它是 175x50，所以我使用 helper 和一个在 175x50 中返回“某种自定义克隆”的函数，但是当我开始拖动时，我的克隆元素从无论光标在哪里，整个元素的左上角......有什么解决方案吗？

【参考方案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 供您查看。

【讨论】：

谢谢，这成功了！但是，我想更多地了解这似乎工作的奇怪方式。例如，将 $(this).find('.name') 保存到变量中，就像在 jQuery 中的其他任何地方一样，以便在其上调用其他函数似乎在这里不起作用。为什么会这样？

我不确定是否理解。您的意思是在辅助功能内？你能分叉我的小提琴并修改javascript来说明吗？

【参考方案2】：

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

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

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

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

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

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"));
    
);

【参考方案3】：

一种可能的解决方案是

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

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