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

要在初始化后禁用拖动，您需要使用选项setter

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

Documentation

JQuery：当项目被删除时无法关闭可拖动

1 个答案: