在将项目从一个jqueryui可排序项获取到另一个jqueryui可排序项时，禁用项目移动的动画

我希望在每个排序表中都具有排序功能。在两个排序表之间，我想将一个可拖动项移动到占位符上，即可拖放项。我想让它看起来好像物品掉到了可放下的东西上。现在，它应该可以在另一个排序表中排序。由于这个原因，我已经将所有可排序项连接起来，在放置占位符时，我删除了占位符并添加了这个拖动项

但是，当项目悬停在任何其他可排序表上时，它会显示项目四处移动的动画。我不想要那个动画，因为理想情况下应该没有额外的可用空间。该项目应仅以可拖放方式进行

可能吗？我该怎么做

谢谢

我创建的小提琴的链接是：

代码如下：

var rearrange = function (rowSelector) {

   var counter = 1;
   $("#" + rowSelector).children(".innerDiv").each(function () {
       $(this).children(":first").html(this.id + " " + counter++);
   });
}

$(function () {


   rearrange("row1");
   rearrange("row2");
   $(".innerDivPlaceholder").droppable({

       activeClass: "droppableHighlight",
       drop: function (event, ui) {

           alert("Dropped !!");
           var sourceRow = ui.helper.context.attributes[1].value; // to get value of token id
           var destinationRow = $(this).context.attributes[1].value; // to get value of token id
           sourceRow1 = new String(sourceRow);
           destinationRow1 = new String(destinationRow);

           //console.log(ui.helper.context);
           alert("Source Row = " + sourceRow1);
           alert("Destination Row = " + destinationRow1);
           if (sourceRow == destinationRow) {
               alert("Source equals destination");
               dropCancelled = true;
               return false;
           } else {
               $(this).remove();
           }
       }
   });
   $(".sortable").sortable({


       connectWith: ".sortable",
       revert: true,
       cancel: ".ui-state-disabled",
       //items : ".innerDiv:not(.innerDivPlaceholder)" ,


       stop: function (event, ui) {

           //$(".sortable").sortable( "enable" );
           var targetList = $(this);

           rearrange(targetList.context.id);

       }
   });
   $(".sortable").disableSelection();

   $(".sortable").on("sortreceive", function (event, ui) {


       var sourceList = ui.sender;
       var targetList = $(this);
       alert("In sortreceive ");
       //alert("Source id = " + sourceList.context.id);
       //alert("Target id = " + targetList.context.id);
       if ($(this).sortable('toArray').length > 3) {
           $(ui.sender).sortable('cancel');
       } else {

           var placeHolderDiv = document.createElement('div');

           placeHolderDiv.setAttribute("id", "placeholder100");
           placeHolderDiv.setAttribute("tokenid", sourceList.context.id);
           placeHolderDiv.setAttribute("class", "innerDivPlaceholder innerDiv ui-state-default ui-state-disabled floatLeftClass column3");


           //var innerPara1 = document.createElement('p');
           //innerPara1.textContent = "placeholder";
           //placeHolderDiv.appendChild(innerPara1);
           $(placeHolderDiv).droppable({

               activeClass: "droppableHighlight",
               drop: function (event, ui) {

                   alert("Dropped !!");
                   var sourceRow = ui.helper.context.attributes[1].value;
                   var destinationRow = $(this).context.attributes[1].value;
                   sourceRow1 = new String(sourceRow);
                   destinationRow1 = new String(destinationRow);


                   alert("Source Row = " + sourceRow1);
                   alert("Destination Row = " + destinationRow1);
                   if (sourceRow == destinationRow) {
                       alert("Source equals destination");
                       dropCancelled = true;
                       return false;
                   } else {
                       $(this).remove();
                   }
               }
           });

           $(placeHolderDiv).appendTo("#" + sourceList.context.id).sortable({

               connectWith: ".dottedDiv",
               revert: true,
               cancel: ".ui-state-disabled",
               //items : ".innerDiv:not(.innerDivPlaceholder)",
               stop: function (event, ui) {

                   //$(".sortable").sortable( "enable" );
                   var targetList = $(this);


                   rearrange(targetList.context.id);

               }
           }).disableSelection();


           rearrange(sourceList.context.id);
           rearrange(targetList.context.id);
           alert("Received !!");
       }
   });

   $(".dropDown").DropDown({


       menus: [{
           label: "Increase column span",
           action: "new",
           icon: 'print-icon'
       }, {
           label: "Decrease column span",
           action: "save",
           icon: 'print-icon' // classes: placing appropriate images at right place
       }],
       maxWidth: 100,
       groupLabel: 'File Hello',
       groupIcon: 'tick-icon',
       orientation: 'horizontal'
   });

});

---

也许这会对某些人有所帮助，将占位符高度设置为零以禁用移动动画

change:  function (event, ui) {
    $(ui.placeholder).height(0);
}

$("#dragger").sortable({
    connectWith: "#dropper",
    placeholder: "<div></div>"
});

$("#dropper").sortable();

---

我遇到了和你一样的问题。我将占位符设置为虚拟div标记以禁用移动动画

change:  function (event, ui) {
    $(ui.placeholder).height(0);
}

$("#dragger").sortable({
    connectWith: "#dropper",
    placeholder: "<div></div>"
});

$("#dropper").sortable();

$（“#dragger”）。可排序({
连接：“滴管”，
占位符：“
});
$（“#滴管”）.sortable（）；