Response title
This is preview!
jquery ui draggable/droppable/sortable
in Using jQuery UI
•
11 years ago
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">
<li class="drag-image" ><img src="any image" border="0" /></li>
<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
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( ".drag-image" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
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 ?
Drag from 1 <li> copy it and drop it in a <ul> with some rules.
Exampel
Drag this:
<ul class="dragelem">
<li class="drag-image" ><img src="any image" border="0" /></li>
<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
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( ".drag-image" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
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 ?
1