asked on
jquery ui draggable/droppable/sortable
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 ?
JavaScriptWeb Languages and StandardsHTMLScripting Languages
Last Comment
ScottNL1
ASKER
Nobody have any idea?
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
FYI I have only implemented the replace method when it is dropped on another. I'll leave it up to you to implement the other rules etc though I'm happy to help if you get stuck
ASKER
Thanks for the input. Run into another problem when using this method. After clone, all items within sortable are deleted when placing one on top if the other. I think i am going to pass on this method and create a delete button if you want to remove items.
Still stuck with the maximum number of items to place within ul sortable. This is a dynamic number from 1 up to 5.
I was thinking of sticking
getElementsByTagName('li')
Still stuck with the maximum number of items to place within ul sortable. This is a dynamic number from 1 up to 5.
I was thinking of sticking
getElementsByTagName('li')