0

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??

2
Contributors
8
Replies
13
Views
4 Years
Discussion Span
Last Post by AleMonteiro
0

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.

0

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.

2

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.