Jquery Drag All item at once

Question

Here is my working code [JsFiddle]1. I want to drag all image with .select class at once, but currently it is dragging a single element.

Answer 1

You should probably use a container for those files, so that you actually drag one element. Then accept this element in container, and then after drop handle the situation as you like.

Try this JSFiddle (modified yours), here's an extract from JS:

$("#OriginalContainer .ImageWrapper").draggable({
        revert: "invalid",
        refreshPositions: true,
        drag: function (event, ui) {
                ui.helper.addClass("draggable");
        },
        stop: function (event, ui) {
                ui.helper.removeClass("draggable");
        }
        });
      $("#DestinationContainer").droppable({
       accept: "#OriginalContainer .ImageWrapper",
       drop: function (event, ui) {

        console.log(ui.draggable); $(ui.draggable).find('.selected').addClass("dropped").removeClass('selected');
             $("#DestinationContainer").append($(ui.draggable).find('.selected'));
        }
        });