禁用從一個jqueryui獲取項目時移動的項目的動畫可排序到另一個

Question

我希望在每個可排序項目中具有可排序的功能。在兩個可排序項目之間，我想將可拖動項目移動到佔位符上，即可丟棄項目。我希望它看起來好像該物品落入可丟棄物。現在，它應該在這種其他排序內排序。出於這個原因，我做了所有可排序的連接，並在佔位符上拖放，我刪除了該佔位符並添加了這個拖動的項目。

但是，將物品懸停在任何其他可排序的項目上時，它會顯示移動項目的動畫。我不想要那個動畫，因爲理想情況下應該沒有多餘的可用空間。該物品應該只能投下。

可能嗎？我該怎麼做？

感謝

鏈接到我創建的小提琴是：http://jsfiddle.net/ZTu24/

守則如下：

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' 
    }); 

}); 

Answer 1

也許這可以幫助別人，爲禁止設置佔位符高度爲零移動動畫。

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