Search jQuery

jQuery Forum

Drag child element from one parent to another

in Using jQuery UI • 6 months ago

I'm trying to create a tool where I could drag a child div from one parent to another.

A few of the conditions that I want to point out is in the source parent, I want to use "overflow: auto" in my css so that I can scroll the items if there are too many available.

The second thing I want to achieve is when I drop the item into the destination parent, I want the item to land where I drop it and still be draggable to any location in the new parent.

Here is what I have so far...

<!DOCTYPE html>
<html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Visual feedback</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.pageItem { width: 110px; height: 90px; float: left; margin: 2px 10px 2px 10px; border: 1px solid blue; background: white; }
#results { display: inline-block; width: 160px; height: 800px; border: 1px solid black; overflow: auto; }
#page { display: inline-block; width: 650px; height: 800px; border: 1px solid black; background: #cccccc;}
#bounding { width: 1000px; height: 900px; border: 1px solid black;}
p { clear:both; margin:0; padding:1em 0; }
</style>
<script>
$(function() {
$( ".pageItem" ).draggable({
revert: false,
stack: "pageItem",
helper: 'clone',
start: function() { $(this).toggle(); },
stop: function() { $(this).toggle(); }
});
$( "#page" ).droppable({
drop: function( event, ui ) {
$( this )
$(ui.draggable).appendTo($(this));
// $( ui.draggable ).resizable();
}
});
});
</script>
</head>
<body>
<div id="bounding">
<h3 class="docs"></h3>
<div id="results">
<div class="pageItem">
<p style="text-align: center;">Item A</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item B</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item C</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item D</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item E</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item F</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item G</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item H</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item I</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item J</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item K</p>
</div>
<div class="pageItem">
<p style="text-align: center;">Item L</p>
</div>
</div>
<div id="page">
</div>
</div>
</body>
</html>

So far it's doing everything I want, except for the fact that it's positioning the items relative to the other elements in the destination parent instead of letting them be placed where they are dropped.

Any help on how I can solve this would be greatly appreciated!

Thanks

Replies(1)

djmoffat

Re: Drag child element from one parent to another

6 months ago

I've made some progress on this, but I'm still having some problems. The current issues are listed below.

When I drop the element on the gray zone, it will jump instead of landing under the cursor
I need the X and Y of each item to be relative to the top left corner of the gray zone after they are dropped. Currently they appear to be based off their assigned position when originally dropped.
When scaling an item, items placed subsequently will shift their position

Here is my current code...

<!DOCTYPE html>
<html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Visual feedback</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style>
.pageItem { display: inline-block; width: 110px; height: 90px; float: left; margin: 2px 10px 2px 10px; border: 1px solid blue; background: white; }
.pageItem2 { float: left; margin: 2px 10px 2px 10px; }
.onpage { clear: both; position: absolute; margin: 0px; }
#results { display: inline-block; width: 160px; height: 800px; border: 1px solid black; overflow: auto; z-index: 2;}
#page { display: inline-block; width: 650px; height: 800px; border: 1px solid black; background: #cccccc; z-index: 1;}
#bounding { width: 1000px; height: 900px; border: 1px solid black;}
p { clear:both; margin:22px; padding:1em 0; }
</style>
<script>
$(function() {
$( ".draggable" ).draggable({
addClasses: false,
revert: false,
scroll: false,
});
$( ".onpage" ).draggable({
addClasses: false,
stack: "#page",
// helper: 'clone',
// start: function() { $(this).toggle(); },
// stop: function() { $(this).toggle(); }
});
$( "#page" ).droppable({
accept: ".draggable",
drop: function( event, ui ) {
$( this )
$(ui.draggable).appendTo($(this));
$( ui.draggable ).resizable({ aspectRatio: true });
$(ui.draggable).removeClass("draggable").addClass("onpage");
}
});
});
</script>
</head>
<body>
<div id="bounding">
<h3 class="docs"></h3>
<div id="results">
<div class="draggable pageItem">
<p style="text-align: center;">Item A</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item B</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item C</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item D</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item E</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item F</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item G</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item H</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item I</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item J</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item K</p>
</div>
<div class="draggable pageItem">
<p style="text-align: center;">Item L</p>
</div>
</div>
<div id="page"></div>
</div>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Drag child element from one parent to another

Replies(1)

Re: Drag child element from one parent to another

Statistics

Tags

Actions

Related Posts