jquery.drag-multiple
jquery.drag-multiple copied to clipboard
javadoug
Divs jumping around
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.
@mchendriks can you create a jsfiddle or something that I can edit live to see if I can help you.
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] https://github.com/javadoug/jquery.drag-multiple/issues/5#issuecomment-58932624 [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
http://jsfiddle.net/mhendriks/fecbk63b/1/#&togetherjs=hDNJ3lqvCm
But its not working as expected.
@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.
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] https://github.com/javadoug/jquery.drag-multiple/issues/5#issuecomment-59034087 [4] http://www.digirent.nl/ [5] https://www.linkedin.com/in/digirent [6] http://twitter.com/#%21/mc_hendriks
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] https://github.com/javadoug/jquery.drag-multiple/issues/5#issuecomment-59034087 [4] http://www.digirent.nl/ [5] https://www.linkedin.com/in/digirent [6] http://twitter.com/#%21/mc_hendriks
I am having the same problem. Simple html: https://jsfiddle.net/50nw6mzy/
Before dragging:
After dragging:
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));
@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?
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 https://github.com/javadoug/jquery.drag-multiple/issues/5#issuecomment-291502422, or mute the thread https://github.com/notifications/unsubscribe-auth/AICg72uLA3sn6HBhR1Y4ULDv6z9Y2bm3ks5rskf8gaJpZM4CuHlQ .