View Single Post
  #1 (permalink)  
Old September 2nd, 2010, 09:08 AM
mingtatl mingtatl is offline
Registered User
 
Join Date: Sep 2010
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Moving li node to another ul list using darg and drop

1. 2 ul are created on a page
2. enable sortable on both ul
3. enable droppable on the 2 ul.
4. the first ul have 2 li node
5. on the drop event, move the li to the target ul, but the following code is not working, anyone know why?
ui.draggable.appendTo(this);
6. try to remove the li node with following code, not working as well.
ui.draggable.remove();
I am unable to apply action like append, appendTo and remove against the source li node. Anyone know why?

7. I am able to clear the child node for the li node using the following code.
ui.draggable.empty();
8. I can only move the li node by creating a new node using following code and delete the original node using code above.
$('<li>' + ui.draggable.html() + '</li>').appendTo(this);
Thanks.
mingtatl

Test Code below;
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul").sortable();

$(".sectionDesignMode").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: "div.toolboxControl, li",
drop: function (event, ui) {

if (ui.draggable.parent()[0] === this) {
//drag and drop on same ul do nothing
} else {

//alert('target UL node child html::' + $(this).html());

//what we really want is to move the li node to the target ul list, but the following code is nothing working, anyone know why?
//ui.draggable.appendTo(this);

//workaround, create a new li node and appendTo to the target ul
$('<li>' + ui.draggable.html() + '</li>').appendTo(this);

//what we really want is to remove the soure li node, but the following code is not working, anyone know why?
//ui.draggable.remove();

//workaround, remove the content of the li node
ui.draggable.empty(); // li node is left behind every time the node is move to another ul list
}
}
});
});
</script>

<style type="text/css">
.ucfInput
{
width: 100%;
margin-top:5px;
margin-bottom:1px;
}
.ucfLabel
{
width: 100px;
text-align: right;
padding-right:4px;
margin-top:8px;
float:left;
word-wrap:break-word; /*Work on IE 8.0 and Firefox 3.6.8*/
}

.sectionDesignMode
{
position:relative;
left:1px;
margin-right:1px;
margin-left:1px;
border:1px solid #4040ff;
margin-bottom:5px;
margin-top:5px;

padding-right:5px;
min-height:20px;
}
ul
{
list-style:none;
}
</style>
</head>
<body>

<label>Section 1</label>
<div id="div-1">
<ul id="source" class="sectionDesignMode">
<li>
<table style="width:100%">
<tr>
<td class="ucfLabel"><label>Field 1</label></td>
<td class="ucfInput"><input type="text" class="ucfInput"/></td>
</tr>
</table>
</li>
<li>
<table style="width:100%">
<tr>
<td class="ucfLabel"><label>Field 2</label></td>
<td class="ucfInput"><input type="text" class="ucfInput"/></td>
</tr>
</table>
</li>
</ul>
</div>
<label>Section 2</label>
<div id="div-2">
<ul id="target" class="sectionDesignMode">
</ul>
</div>

</body>
</html>
Thanks.
Reply With Quote