Drag multiple divs into another jQuery
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
3
I've been trying to drag divs from one div to another using jQuery. Here's what I've got so far
$(document).ready(function() {
$(".draggable").draggable();
$(".bucket").droppable({
drop: function(event, ui) {
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
});.bucket {
width: 400px;
height: 150px;
background: #ddd
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
}
#destination {
background: #aaa
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>I've adapted the js from this answer, but to handle multiple draggable elements I've used the data-bucket attribute to only apply the positioning when the element is initially dropped into the bucket, instead of every time it's moved around in it.
As you can see from the example, this solution kind-of works, but once more than two divs have been dragged into the destination bucket then they all start to jump around and don't land where the cursor puts them
It seems like it should be a simple fix but I've been scratching my head on this one for a day or so now, any help?
javascript jquery jquery-ui-draggable jquery-ui-droppable
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
add a comment |
3
I've been trying to drag divs from one div to another using jQuery. Here's what I've got so far
$(document).ready(function() {
$(".draggable").draggable();
$(".bucket").droppable({
drop: function(event, ui) {
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
});.bucket {
width: 400px;
height: 150px;
background: #ddd
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
}
#destination {
background: #aaa
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>I've adapted the js from this answer, but to handle multiple draggable elements I've used the data-bucket attribute to only apply the positioning when the element is initially dropped into the bucket, instead of every time it's moved around in it.
As you can see from the example, this solution kind-of works, but once more than two divs have been dragged into the destination bucket then they all start to jump around and don't land where the cursor puts them
It seems like it should be a simple fix but I've been scratching my head on this one for a day or so now, any help?
javascript jquery jquery-ui-draggable jquery-ui-droppable
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
add a comment |
3
3
3
I've been trying to drag divs from one div to another using jQuery. Here's what I've got so far
$(document).ready(function() {
$(".draggable").draggable();
$(".bucket").droppable({
drop: function(event, ui) {
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
});.bucket {
width: 400px;
height: 150px;
background: #ddd
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
}
#destination {
background: #aaa
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>I've adapted the js from this answer, but to handle multiple draggable elements I've used the data-bucket attribute to only apply the positioning when the element is initially dropped into the bucket, instead of every time it's moved around in it.
As you can see from the example, this solution kind-of works, but once more than two divs have been dragged into the destination bucket then they all start to jump around and don't land where the cursor puts them
It seems like it should be a simple fix but I've been scratching my head on this one for a day or so now, any help?
javascript jquery jquery-ui-draggable jquery-ui-droppable
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
I've been trying to drag divs from one div to another using jQuery. Here's what I've got so far
$(document).ready(function() {
$(".draggable").draggable();
$(".bucket").droppable({
drop: function(event, ui) {
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
});.bucket {
width: 400px;
height: 150px;
background: #ddd
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
}
#destination {
background: #aaa
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>I've adapted the js from this answer, but to handle multiple draggable elements I've used the data-bucket attribute to only apply the positioning when the element is initially dropped into the bucket, instead of every time it's moved around in it.
As you can see from the example, this solution kind-of works, but once more than two divs have been dragged into the destination bucket then they all start to jump around and don't land where the cursor puts them
It seems like it should be a simple fix but I've been scratching my head on this one for a day or so now, any help?
$(document).ready(function() {
$(".draggable").draggable();
$(".bucket").droppable({
drop: function(event, ui) {
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
});.bucket {
width: 400px;
height: 150px;
background: #ddd
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
}
#destination {
background: #aaa
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>$(document).ready(function() {
$(".draggable").draggable();
$(".bucket").droppable({
drop: function(event, ui) {
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
});.bucket {
width: 400px;
height: 150px;
background: #ddd
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
}
#destination {
background: #aaa
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>javascript jquery jquery-ui-draggable jquery-ui-droppable
javascript jquery jquery-ui-draggable jquery-ui-droppable
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
asked Nov 26 '18 at 13:43
Jacob BarrowJacob Barrow
1341316
1341316
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
I've set the .draggable divs CSS to position: absolute, and the parents to position: relative. Also some adjustments for initially displaying the absolute positioned divs and showing the status after they've been dropped.
Please have a look at the code below:
$(document).ready(function () {
$.each( $(".draggable"), function( key, value ) {
$(this).css('top',(35*key)+"px");
});
$(".draggable").mousedown(function() {
$("#status").html('');
})
$(".draggable").draggable();
$(".bucket").droppable({
drop: function (event, ui) {
$("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
}); .bucket {
width: 400px;
height: 150px;
background: #ddd;
position: relative;
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
position: absolute;
z-index: 10;
}
#destination {
background: #aaa;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>
<pre id="status"></pre>answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
1
I'd never thought that the CSS was the problem, that's great cheers
– Jacob Barrow
Nov 26 '18 at 17:30
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53482438%2fdrag-multiple-divs-into-another-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I've set the .draggable divs CSS to position: absolute, and the parents to position: relative. Also some adjustments for initially displaying the absolute positioned divs and showing the status after they've been dropped.
Please have a look at the code below:
$(document).ready(function () {
$.each( $(".draggable"), function( key, value ) {
$(this).css('top',(35*key)+"px");
});
$(".draggable").mousedown(function() {
$("#status").html('');
})
$(".draggable").draggable();
$(".bucket").droppable({
drop: function (event, ui) {
$("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
}); .bucket {
width: 400px;
height: 150px;
background: #ddd;
position: relative;
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
position: absolute;
z-index: 10;
}
#destination {
background: #aaa;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>
<pre id="status"></pre>answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
1
I'd never thought that the CSS was the problem, that's great cheers
– Jacob Barrow
Nov 26 '18 at 17:30
add a comment |
1
I've set the .draggable divs CSS to position: absolute, and the parents to position: relative. Also some adjustments for initially displaying the absolute positioned divs and showing the status after they've been dropped.
Please have a look at the code below:
$(document).ready(function () {
$.each( $(".draggable"), function( key, value ) {
$(this).css('top',(35*key)+"px");
});
$(".draggable").mousedown(function() {
$("#status").html('');
})
$(".draggable").draggable();
$(".bucket").droppable({
drop: function (event, ui) {
$("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
}); .bucket {
width: 400px;
height: 150px;
background: #ddd;
position: relative;
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
position: absolute;
z-index: 10;
}
#destination {
background: #aaa;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>
<pre id="status"></pre>answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
1
I'd never thought that the CSS was the problem, that's great cheers
– Jacob Barrow
Nov 26 '18 at 17:30
add a comment |
1
1
1
I've set the .draggable divs CSS to position: absolute, and the parents to position: relative. Also some adjustments for initially displaying the absolute positioned divs and showing the status after they've been dropped.
Please have a look at the code below:
$(document).ready(function () {
$.each( $(".draggable"), function( key, value ) {
$(this).css('top',(35*key)+"px");
});
$(".draggable").mousedown(function() {
$("#status").html('');
})
$(".draggable").draggable();
$(".bucket").droppable({
drop: function (event, ui) {
$("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
}); .bucket {
width: 400px;
height: 150px;
background: #ddd;
position: relative;
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
position: absolute;
z-index: 10;
}
#destination {
background: #aaa;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>
<pre id="status"></pre>answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
I've set the .draggable divs CSS to position: absolute, and the parents to position: relative. Also some adjustments for initially displaying the absolute positioned divs and showing the status after they've been dropped.
Please have a look at the code below:
$(document).ready(function () {
$.each( $(".draggable"), function( key, value ) {
$(this).css('top',(35*key)+"px");
});
$(".draggable").mousedown(function() {
$("#status").html('');
})
$(".draggable").draggable();
$(".bucket").droppable({
drop: function (event, ui) {
$("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
}); .bucket {
width: 400px;
height: 150px;
background: #ddd;
position: relative;
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
position: absolute;
z-index: 10;
}
#destination {
background: #aaa;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>
<pre id="status"></pre> $(document).ready(function () {
$.each( $(".draggable"), function( key, value ) {
$(this).css('top',(35*key)+"px");
});
$(".draggable").mousedown(function() {
$("#status").html('');
})
$(".draggable").draggable();
$(".bucket").droppable({
drop: function (event, ui) {
$("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
}); .bucket {
width: 400px;
height: 150px;
background: #ddd;
position: relative;
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
position: absolute;
z-index: 10;
}
#destination {
background: #aaa;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>
<pre id="status"></pre> $(document).ready(function () {
$.each( $(".draggable"), function( key, value ) {
$(this).css('top',(35*key)+"px");
});
$(".draggable").mousedown(function() {
$("#status").html('');
})
$(".draggable").draggable();
$(".bucket").droppable({
drop: function (event, ui) {
$("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");
if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
ui.draggable.attr("data-bucket", $(this).attr('id'));
var p1 = ui.draggable.parent().offset();
$(this).append(ui.draggable);
var p2 = ui.draggable.parent().offset();
ui.draggable.css({
top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
});
}
}
});
}); .bucket {
width: 400px;
height: 150px;
background: #ddd;
position: relative;
}
.draggable {
width: 50px;
height: 30px;
margin-top: 5px;
background: red;
position: absolute;
z-index: 10;
}
#destination {
background: #aaa;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
<div class="draggable" data-bucket="origin">Drop 1</div>
<div class="draggable" data-bucket="origin">Drop 2</div>
<div class="draggable" data-bucket="origin">Drop 3</div>
<div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>
<pre id="status"></pre>answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
answered Nov 26 '18 at 16:22
Dan D.Dan D.
580414
580414
1
I'd never thought that the CSS was the problem, that's great cheers
– Jacob Barrow
Nov 26 '18 at 17:30
add a comment |
1
I'd never thought that the CSS was the problem, that's great cheers
– Jacob Barrow
Nov 26 '18 at 17:30
1
1
I'd never thought that the CSS was the problem, that's great cheers
– Jacob Barrow
Nov 26 '18 at 17:30
I'd never thought that the CSS was the problem, that's great cheers
– Jacob Barrow
Nov 26 '18 at 17:30
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53482438%2fdrag-multiple-divs-into-another-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
