JQuery：項目被丟棄時無法關閉可拖動

Question

我有一個JQuery輪播，我已經適應了我的需要。我需要將列表項從我的輪播拖放到可放置區域。 這個效果很好，但是如果我放下一個物品然後旋轉轉盤，放下的物品也會旋轉。

爲了解決這個問題，我嘗試添加一個類到列表項中，因爲JQuery會認爲'id'是唯一的。我也有加入

$('#carousel-ul li').draggable({disable: true}); 

我希望這將停止下降項被拖動，代碼仍然執行確定，但被丟棄的項目仍與旋轉木馬幻燈片。

我也曾嘗試

$('#carousel-ul .image-item').draggable('option', 'cancel', ''); 
$('#carousel-ul .image-item').draggable(false); 

希望有人能幫助，下面是我的代碼，在此先感謝！

$('#carousel-ul > .image-item').draggable(); 

    $('#drop-target').droppable({ 

     helper: clone, 
     hoverClass: 'drophover', 
     tolerance: 'fit', 
     accept: '#carousel-ul > .image-item', 
     drop: function(event, ui) { 

      var name = draggable.attr("id").val(); 
      $('#carousel-ul > .image-item').appendTo(this); 
      $('#carousel-ul .image-item').draggable('option', 'cancel', ''); 
      $.post("Javacript_Controller.php", { name: name},function(data){ 

       $('#drop-content').html(data); 

      }); 
     } 
    });   

HTML

<div id='carousel-inner'> 
<ul id='carousel-ul'> 
    <?php if(isset($_POST['option'])){ 
    foreach($imageResult as $value) { 
     $image_path = "./imagesdb/images/" .$_SESSION['user_id']; 
     $mainImage = $image_path . '/' . $value; 
     $thumbImage = $image_path . "t/" . $value; 
     echo '<li class="ui-corner-tr image-item"><div id="image-item"><img src="'.$thumbImage.'" id="'.$thumbImage.'"alt="wardrobe-item"/></div>'; 

      } 
    } 
?> 

</ul> 
<div id="drop-container"> 
    <div id="drop-target"> 
    </div> 
    <div id="drop-content"> 
     </div> 
</div> 



       </div> 

Answer 1

要禁用拖動後，它已被初始化，您需要使用的選項設置器，

$('#carousel-ul .image-item').draggable('option', 'disabled', true); 

Documentation