jQuery ui draggable和bxslider无法正常工作

Question

i have slider in bxSlider, and the item of the slider is draggable using jquery ui.

for better understanding, here is the slider in action http://comicedu.com/htmlcropper/v2/

try to drag the dog in dogs tab to the background (brick) you will see the dog now inside the brick, then move to cats tab, after that click the left arrow then drag the 3rd image and now you will see the draggable is not working, what is wrong with that? i investigate that bxSlider add bx-clone class to the container div.

Answer 1

This is just a guess, but it looks like to me, jquery is attaching the drag and drop events first to the 'true' (not cloned) images, then bxslider is creating the clones AFTER jquery has registered the images for drag and drop, so the cloned images aren't being attached to the drag/drop events?

Try loading things in order.

$(function(){
    loadSlider();
    loadDragDrop();
};

function loadSlider{
    //Load the slider
}

function loadDragDrop(){
    //Load the drag/drop
}

OR Attach the drag/drop on page load as you are now, then try re-attaching the drag/drop on this event of the bxslider:

onSlideAfter: function() {},

Hopefully this will force the drag/drop to be added to clones as well since they would have been created by the slider already.

Clones are created to fill in the empty slots in your slider. say your slider can fit 6 images and you have 8 images, 4 clones will be created so when you skip to the second group, the slider is full.

If my guess is way off (and it could be), you can do 2 things to 'quick' fix until a better sloution comes along:

1. Hide any bx-clone elements with css

   .bx-clone { display:none; }

2. Make sure you have the correct amount of images to fill the slider. For cats, it looks like you have 10 images, the others are clones, so make the number of cat images 16 so the slider doesn't have to create any clones.