Divs jumping around

[mchendriks]

I'm trying to use your plugin with jquery 1.11.1 but when I try to drag a div the other divs get a random position when a start to drag.

See a very basic example on: http://oud.digirent.nl/jqui11/examples/multidrag.html
I hope you can tell me what am I doing wrong or perhaps it is a bug in the plugin.

[javadoug]

@mchendriks can you create a jsfiddle or something that I can edit live to see if I can help you.

[mchendriks]

Hello Doug,

I've tried to make a fiddle, but i'm not sure what to
include.

Here is the link:

http://jsfiddle.net/mhendriks/fecbk63b/1/#&togetherjs=hDNJ3lqvCm

From Fiddle I can only drag 1 div, the other ones are not coming
along.

On http://oud.digirent.nl/jqui11/examples/multidrag.html [3]
you can see what is happening. It looks like the vertical position is
not calculated right.

Hope this helps.

---

Groeten Matthieu

---

Matthieu Hendriks
De Kweek 22
6741
ET
Lunteren
+31 (0)6-52371841
Website:http://www.DigiRent.nl [4]

LinkedIn: https://www.linkedin.com/in/digirent [5]
Twitter:

http://twitter.com/#!/mc_hendriks [6]

Doug Ross schreef op 2014-10-13 20:15:

@mchendriks [1] can you
create a jsfiddle or something that I can edit live to see if I can help
you.

Reply to this email directly or view it on GitHub [2].

Links:

[1] https://github.com/mchendriks
[2]
#5 (comment)
[3]
http://oud.digirent.nl/jqui11/examples/multidrag.html
[4]
http://www.digirent.nl/
[5] https://www.linkedin.com/in/digirent
[6]
http://twitter.com/#%21/mc_hendriks

[mchendriks]

http://jsfiddle.net/mhendriks/fecbk63b/1/#&togetherjs=hDNJ3lqvCm

But its not working as expected.

[javadoug]

@mchendriks thanks. I forked your jsfiddle and got the jumping div behavior: http://jsfiddle.net/javadoug/La9cqgoL/. I cannot look at it right now but I will as soon as I can. In the meantime, if you find a fix I would gladly accept a pull request.

[mchendriks]

Great that you got the same behavior, if I'm able to fix it, I will
let you know.

But I'm not very good in Javascript / Plugins.

---

Groeten Matthieu

Matthieu
Hendriks
De Kweek 22
6741 ET
Lunteren
+31 (0)6-52371841

Website:http://www.DigiRent.nl [4]
LinkedIn:
https://www.linkedin.com/in/digirent [5]
Twitter:

http://twitter.com/#!/mc_hendriks [6]

Doug Ross schreef op 2014-10-14 14:24:

@mchendriks [1] thanks. I
forked your jsfiddle and got the jumping div behavior:
http://jsfiddle.net/javadoug/La9cqgoL/ [2]. I cannot look at it right
now but I will as soon as I can. In the meantime, if you find a fix I
would gladly accept a pull request.

Reply to this email
directly or view it on GitHub [3].

Links:

[1]
https://github.com/mchendriks
[2]
http://jsfiddle.net/javadoug/La9cqgoL/
[3]
#5 (comment)
[4]
http://www.digirent.nl/
[5] https://www.linkedin.com/in/digirent
[6]
http://twitter.com/#%21/mc_hendriks

[mchendriks]

Hello Doug,

The draggable items should be styled position:fixed;
than the dragging is ok. When they are relative the jumping starts.

Perhaps it is an option to make them fixed when starting to drag, for
now I have a workaround.

Thanks for your time.

---

Groeten Matthieu

---

Matthieu Hendriks
De Kweek 22
6741
ET
Lunteren
+31 (0)6-52371841
Website:http://www.DigiRent.nl [4]

LinkedIn: https://www.linkedin.com/in/digirent [5]
Twitter:

http://twitter.com/#!/mc_hendriks [6]

Doug Ross schreef op 2014-10-14 14:24:

@mchendriks [1] thanks. I
forked your jsfiddle and got the jumping div behavior:
http://jsfiddle.net/javadoug/La9cqgoL/ [2]. I cannot look at it right
now but I will as soon as I can. In the meantime, if you find a fix I
would gladly accept a pull request.

Reply to this email
directly or view it on GitHub [3].

Links:

[1]
https://github.com/mchendriks
[2]
http://jsfiddle.net/javadoug/La9cqgoL/
[3]
#5 (comment)
[4]
http://www.digirent.nl/
[5] https://www.linkedin.com/in/digirent
[6]
http://twitter.com/#%21/mc_hendriks

[joetm]

I am having the same problem.
Simple html: https://jsfiddle.net/50nw6mzy/

Before dragging:

After dragging:

[RyotaBannai]

I had the same issue and fixed it. I leave improved program below here.

• First of all, I fixed the problem happening after dragging items.
  The reason of it is a setting item's position. If you revise this as I write down at
  " /////here is a problem/ ", it will work perfectly.

• Second, a revert function is also a problem. I revise it so as to revert to an original position by writing down below at ////*back to original position */.

Thanks.
ryota

(function ($) {

var options = {

    // allow consumer to specify the selection
    items: function getSelectedItems() {
        return $(".ui-draggable.ui-selected");
    },

    // allow consumer to cancel drag multiple
    beforeStart: function beforeDragMultipleStart() {
        // make sure target is selected, otherwise deselect others
        if (!(this.is('.ui-draggable') && this.is('.ui-selected'))) {
            $(".ui-draggable").removeClass('ui-selected');
            return false;
        }
    },

    // notify consumer of drag multiple
    beforeDrag: $.noop,

    // notify consumer of drag multiple stop
    beforeStop: $.noop

};

function preventDraggableRevert() {
    return false;
}

/** given an instance return the options hash */
function initOptions(instance) {
    return $.extend({}, options, instance.options.multiple);
}

function callback(handler, element, jqEvent, ui) {
    if ($.isFunction(handler)) {
        return handler.call(element, jqEvent, ui);
    }
}

function notifyBeforeStart(element, options, jqEvent, ui) {
    return callback(options.beforeStart, element, jqEvent, ui);
}

function notifyBeforeDrag(element, options, jqEvent, ui) {
    return callback(options.beforeDrag, element, jqEvent, ui);
}

function notifyBeforeStop(element, options, jqEvent, ui) {
    return callback(options.beforeStop, element, jqEvent, ui);
}

$.ui.plugin.add("draggable", "multiple", {

    /** initialize the selected elements for dragging as a group */
    start: function (ev, ui) {

        var element, instance, selected, options;

        // the draggable element under the mouse
        element = this;

        // the draggable instance
        instance = element.data('draggable') || element.data('ui-draggable');

        // initialize state
        instance.multiple = {};

        // the consumer provided option overrides
        options = instance.multiple.options = initOptions(instance);

        // the consumer provided selection
        selected = options.items();

        // notify consumer before starting
        if (false === notifyBeforeStart(element, options, ev, ui)) {
            options.dragCanceled = true;
            return false;
        }

        // cache respective origins
        selected.each(function () {
            **////*back to original position */** var position = $(this).position();
            **var position = {top: (ui.position.top - ui.originalPosition.top), left: (ui.position.left - ui.originalPosition.left)};**
            $(this).data('dragmultiple:originalPosition', $.extend({}, position));
        });

        // TODO: support the 'valid, invalid and function' values
        //  currently only supports true
        // disable draggable revert, we will handle the revert
        instance.originalRevert = options.revert = instance.options.revert;
        instance.options.revert = preventDraggableRevert;
    },

    // move the selected draggables
    drag: function (ev, ui) {

        var element, instance, options;

        element = this;
        instance = element.data('draggable') || element.data('ui-draggable');
        options = instance.multiple.options;

        if (options.dragCanceled) {
            return false;
        }

        notifyBeforeDrag(element, options, ev, ui);

        // check to see if consumer updated the revert option
        if (preventDraggableRevert !== instance.options.revert) {
            options.revert = instance.options.revert;
            instance.options.revert = preventDraggableRevert;
        }

        // TODO: make this as robust as draggable's positioning
        options.items().each(function () {
            var origPosition = $(this).data('dragmultiple:originalPosition');
            // NOTE: this only works on elements that are already positionable
            $(this).css({
                /////*here is a problem* /top: origPosition.top + (ui.position.top - ui.originalPosition.top),
                top: (ui.position.top - ui.originalPosition.top),
                /////*here is a problem*/ left: origPosition.left + (ui.position.left - ui.originalPosition.left)
                left: (ui.position.left - ui.originalPosition.left)
            });
        });

    },

    stop: function (ev, ui) {

        var element, instance, options;

        element = this;
        instance = element.data('draggable') || element.data('ui-draggable');
        options = instance.multiple.options;

        if (options.dragCanceled) {
            return false;
        }

        notifyBeforeStop(element, options, ev, ui);

        // TODO: mimic the revert logic from draggable
        if (options.revert === true) {
            options.items().each(function () {
                var position = $(this).data('dragmultiple:originalPosition');
                $(this).css(position);
            });
        }

        // clean up
        options.items().each(function () {
            $(this).removeData('dragmultiple:originalPosition');
        });

        // restore orignal revert setting
        instance.options.revert = instance.originalRevert;

    }
});

}(jQuery));

[javadoug]

@RyotaBannai Thank you for the code change suggestion. I will take a look. Did you try @mchendriks fix (style position fixed)? Did that not work?

[RyotaBannai]

Thanks for paying attention to my reply ;) I've not tried @mchendriks <https://github.com/mchendriks> solution yet, I'll. 2017-04-04 6:39 GMT-07:00 Doug Ross <[email protected]>:

…

@RyotaBannai <https://github.com/RyotaBannai> Thank you for the code change suggestion. I will take a look. Did you try @mchendriks <https://github.com/mchendriks> fix (style position fixed)? Did that not work? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AICg72uLA3sn6HBhR1Y4ULDv6z9Y2bm3ks5rskf8gaJpZM4CuHlQ> .