0

I want to create a photo organiser where you can reorder images and drop them into a trash box to remove them. My issue is that when you begin to drag an image, it is not below the cursor anymore, about 500px to the left. My current code - http://jsfiddle.net/D4xQh/.

$("#currentImages").sortable();
$(".imgThumb", "#currentImages").draggable({
    connectToSortable: "#currentImages",
    helper: "original",
    revert: "invalid"
});
$("#trash").droppable({
  drop: function( event, ui ) {
    var $item=( ui.draggable );
    $item.fadeOut();
  }
});

I tried removing the draggable part, but this results in images that are sent to the trash to revert to their original place and then fade out. This makes it look very uneasy and doesn't look professional either. This is it without the draggable option - http://jsfiddle.net/D4xQh/1/

The grey box in the JSFiddle is the "trash" box

Kara
  • 6,115
  • 16
  • 50
  • 57
Blease
  • 1,380
  • 4
  • 38
  • 64

1 Answers1

0

I don't know if this solves your problem but you were missing the revert param:

$("#currentImages").sortable({
    revert: true
});

Try this: http://jsfiddle.net/D4xQh/2/

user1477388
  • 20,790
  • 32
  • 144
  • 264