troubleshooting Question

jquery ui draggable/droppable/sortable

Avatar of ScottNL1
ScottNL1 asked on
Web Languages and StandardsJavaScriptHTMLScripting Languages
4 Comments1 Solution905 ViewsLast Modified:
What do i want to do
Drag from 1 <li> copy it and drop it in a <ul> with some rules.


Exampel

Drag this:
<ul class="dragelem">
&#9;<li class="drag-image" ><img src="any image" border="0"  /></li>
&#9;<li class="drag-image" ><img src="any image" border="0"  /></li>
</ul>

Drop here:
<ul id="sortable" class="drop">

</ul>

This seems easy enough by adding this
&#9;$(function() {
&#9;&#9;$( "#sortable" ).sortable({
&#9;&#9;&#9;revert: true
&#9;&#9;});
        $( ".drag-image" ).draggable({
            connectToSortable: "#sortable",
            helper: "clone",
&#9;&#9;&#9;revert: "invalid"
            });
         $( "ul, li" ).disableSelection();
    });

The exceptions:

Maximum number of <li> tags within <ul id= "sortable"> is 5.
If there are 5 and you want to drag a new one to the sortable it should replace the one it has been dropped on.

Haven't been able to find a solution for that yet. Any idea's ?
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros