Hey guys I have a page where a user can drag and drop ellements into divs 's and everything works great, but I need the div to only accept 1 element.
Check it out Click Here
Right now you can drag both pdf docs into one "send to print" div. I need to able to either kick out the existing one or not allow the second ellement to be dropped at all.
Any ideas??
Jump to PostThe link is broken, can't see anything.
In any case, take a look at jQUery UI Drag & Drop: http://jqueryui.com/droppable/
Jump to PostIs not too much pretty, but it works:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="
The link is broken, can't see anything.
In any case, take a look at jQUery UI Drag & Drop: http://jqueryui.com/droppable/
Sorry for the link this is the correct link Click HereIm looking at the page that you suggested above and Im not sure if that is what I need, I will look over it good, but I need to make sure that the user cant stack 2 in the same div.
Ok, since you are using connected lists, listen to the receive event and when it occurs, validate if there's another item in the target. If there is, you can either remove the old one or the new one.
Ale, do you think you could show me an example of how this would work? I know its aggravating for newbies like me to bother you like this.
Is not too much pretty, but it works:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists</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>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function(evt, ui) {
if ( ui.item.parent().hasClass("acceptOnlyOne") ) { // if drop target only accept one item
if ( ui.item.parent().children().length > 1 ) { // check if it has more than one item
alert("You can drop only one item in here!"); // alert something
$("#sortable1").append( ui.item.detach() ); // detach the dropped item from the dropped target and append it to the previous container
}
}
}
}).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable acceptOnlyOne" style="min-height: 30px; min-width: 100px; border: 1px solid black;">
</ul>
</body>
</html>
Ale, Thanks so much! Saved the day!!
It works great.
You're welcome.
Just mark the thred as solved, and my answer as helpful if you can.
Seeya.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.