p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: Beginning JavaScript and CSS Development with jQuery (http://p2p.wrox.com/forumdisplay.php?f=502)
-   -   Moving li node to another ul list using darg and drop (http://p2p.wrox.com/showthread.php?t=80786)

mingtatl September 2nd, 2010 09:08 AM

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.

mingtatl September 6th, 2010 03:36 AM

The Solution without required drop handler...
 
It turn out that there is an easy way to accomplish the above, by using connectWith option for sortable.

Solution;
Code:

<!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({
            connectWith: '.sectionDesignMode',
        }).disableSelection();

        $(".sectionDesignMode").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: "li",
        });
    });
</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>



All times are GMT -4. The time now is 07:47 PM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.