CODEWITHSUNDEEP
jqueryjquery-uidrag-and-drop
Dipal Mehta
Dipal Mehta

Reputation: 462

jQuery drag drop set position of elements

I want to create a timeline with horizontal scroll where one can drag events on timeline. For that i have created a dynamic grid and used jQuery ui Drag drop.

It runs fine, but when i scroll it horizontally, the position of dropped elements are not changing. So, probably i have to maintain all dropped elements position. Is there any easy way to achieve this, i mean with css etc..?

    var dropBox;
    var drag;
    var maxEventsInMonth = 10;
    var maxDataRow = 6;

Please refer.

http://jsfiddle.net/dipal/GSNrX/14/

Upvotes: 0

Views: 2436

Answers (1)

wildhaber
wildhaber

Reputation: 1661

You could clone the element on dragstart and replace the targets HTML by the clone and remove the dragged element. So you have the image as it would be natively inside the grid.

I just made a jsfiddle (http://jsfiddle.net/uDYEr/) out of your default code and comment out the handleDrop-function beacuse this causes errors and I dont want to clean up your code ;-)

Mainly I did the following:

adding two new vars:

    var dragClone = false;
    var dragElement = false;

clone the element on start:

        $('#drag li').draggable({
            revert: "invalid",
            cursor: "move",
            start : function() {
                dragClone = $(this).clone();
                dragElement = $(this);
            }
        });

then append dragClone to the target and remove dragElement on drop:

        dropBox.droppable({
            accept: "#drag li",
            scroll: true,
            drop: function (event, ui) {
                $(this).html(dragClone);
                dragElement.remove();
              // handleDrop($(this), event, ui);
                return true;
            }
        });

hope this helps. or at least gives you an idea how this can be made.

Upvotes: 1

Related Questions