Question

I have a JQuery carousel which I have adapted for my needs. I need to drag a list item from my carousel to a dropable area.
This works great, however if I drop an item and then rotate the carousel, the dropped Item also rotates.

To get round this i tried adding a class to the list item as JQuery would think that the ‘id’ would be unique. Also i have added

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

I hoped this would stop the dropped item being draggable, the code still executes ok but the dropped item still slides with the carousel.

I have also tried

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

Hope someone can help, below is my code, thanks in advance!

$('#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

To disable dragging AFTER it has been initialized you need to use the option setter,

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

Documentation