Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > BOOK: Beginning JavaScript and CSS Development with jQuery
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
BOOK: Beginning JavaScript and CSS Development with jQuery
This is the forum to discuss the Wrox book Beginning JavaScript and CSS Development with jQuery by Richard York; ISBN: 9780470227794
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning JavaScript and CSS Development with jQuery section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 2nd, 2010, 09:08 AM
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
  #2 (permalink)  
Old September 6th, 2010, 03:36 AM
Registered User
 
Join Date: Sep 2010
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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>
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding a node to an existing xml node list. codehelp C# 2008 aka C# 3.0 2 October 12th, 2009 07:41 AM
node-set() -- moving from msxsl to saxon, etc. tripecac XSLT 24 May 4th, 2007 01:52 PM
create <ul> with alternating class on <li> element Brian Campbell XSLT 2 November 3rd, 2006 06:07 PM
Something about li and ul sfs00784 CSS Cascading Style Sheets 1 July 31st, 2005 02:03 AM
TREE USING UL/LI pallone Javascript How-To 11 February 16th, 2005 04:03 PM



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


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