Search jQuery

jQuery Forum

drag into different divs and containment

in Using jQuery UI • 6 years ago

Hello,

I want to drag divs into two different divs (drop1 / drop2). It works for one box as desired (drop1). But I want this for both divs (drop1 / drop2) and it should be possible that the drag-container can be moved between the two divs (drop1 / drop2).

View code and result on JSFiddle.net

var num1, cnt1 = 0;
$(function() {
$('.drag').draggable({
revert: 'invalid',
containment: '#drop2, #drop1',
snap: '#drop2, #drop1',
stack: 'div',
opacity: 0.7,
start: function(e, ui) {
num1 = $(this).attr('rel');
},
stop: function(e, ui) {
}
}).each(
function() {
var diffDrag1 = $('#start').offset().left + 9*cnt1;
var diffDrag2 = $('#start').offset().top + 9*cnt1;
$(this).css({'left':diffDrag1,'top':diffDrag2});
cnt1++;
});
$('#drop1').droppable({
activeClass: 'active1',
hoverClass: 'hover1',
tolerance: 'touch',
drop: function(e, ui) {
}
});
});

if the draggable and droppable function in loop, like:

var num1, cnt1 = 0;
$(function() {
$('.drag').draggable({
revert: 'invalid',
containment: '#drop2, #drop1',
snap: '#drop2, #drop1',
stack: 'div',
opacity: 0.7,
start: function(e, ui) {
num1 = $(this).attr('rel');
},
stop: function(e, ui) {
}
}).each(
function() {
var diffDrag1 = $('#start').offset().left + 9*cnt1;
var diffDrag2 = $('#start').offset().top + 9*cnt1;
$(this).css({'left':diffDrag1,'top':diffDrag2});
cnt1++;
});
$('#drop1').droppable({
activeClass: 'active1',
hoverClass: 'hover1',
tolerance: 'touch',
drop: function(e, ui) {
}
});
});

then the drag-divs (drag1, drag2, drag3) snap into the left corner of the drop-divs. Why? And have anyone a hint for me..

Response title

Attachments

jQuery Forum

drag into different divs and containment

Statistics

Tags

Actions