当助手设置为“克隆”时，我无法通过将列表项拖放到相应选项卡上来移动元素

Posted 2023-05-08

【中文标题】当助手设置为“克隆”时，我无法通过将列表项拖放到相应选项卡上来移动元素

【英文标题】：I can not move an element by dropping the list item on the appropriate tab when helper is set to "clone"

【发布时间】：2012-12-25 02:47:22

【问题描述】：

我想通过将列表项拖放到适当的选项卡上来移动一个元素。 我使用 Simon Battersby 的解决方案，在列表中添加一个风格化的滚动条： Vertical Scrollbar Plugin using jQueryUI Slider。 当您在屏幕上拖动时，我使用了以下解决方案来显示列表项： jQuery Draggable and overflow issue.

我的样本是http://jsfiddle.net/XmahV/

当可排序选项中的 helper="original" 时，以下代码有效：

drop: function( event, ui ) 
   var $tabItem = $( this );
   var $list = $( $tabItem.find( "a" ).attr( "href" ) ).find( ".sortable" );

   **ui.draggable.hide( "slow", function() 
   $(this).appendTo($list).show();//it does not work in my case
   );**              

但在我的情况下 helper="clone":

$( ".sortable" ).sortable(
                    connectWith: ".sortable",
                    //Need to drag across the entire window. Overflow issue.
                    appendTo: "body",  
                    containment: "window",
                    scroll: false,
                    helper: "clone"
                    //End Overflow issue.
        );

在降低标签标题时，有人可以帮我移动列表项吗？ 或者有人可以告诉我，当您将项目转移到选项卡的标题时，如何从列表中删除项目？

谢谢

【参考方案1】：

事实是，在使用“克隆”选项的情况下，原始元素会被隐藏。因此，您不能重新隐藏已经隐藏的元素......这就是它不起作用的原因。我刚刚在您的代码之前显示了原始元素：http://jsfiddle.net/XmahV/4/

var $tab_items = $("ul:first li", $tabs).droppable(
  accept: ".sortable .dragItem",
  hoverClass: "ui-state-hover",
  start: function (event, ui) ,
  stop: function (event, ui) ,
  receive: function (event, ui) ,

  drop: function (event, ui) 
    var $tabItem = $(this);
    var $list = $($tabItem.find("a").attr("href")).find(".sortable");

    //In case of clone helper, you must force to display the original element before hide it
    ui.draggable.show();
    ui.draggable.hide("slow", function () 
      $(this).appendTo($list).show();
    );

  

【讨论】：

谢谢，不幸的是，这些更改的工作方式类似 helper = "clone"