jQuery add and remove with draggable and droppable

Posted: July 26, 2011 in Jquery
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/jquery.ui.all.css">	
<script src="js/jquery.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/effects.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; cursor:move; }
#sortable li .removeMe { cursor:pointer; float:right;}
#desortable { list-style-type: none; margin: 0; padding: 0;}
#desortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#desortable li .addMe{ cursor:pointer; float:right;}
#desortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
	$( "#sortable" ).sortable({
		placeholder: "ui-state-highlight"
	});
	$( "#sortable" ).disableSelection();
	//===== add new ======
	$("#desortable .ui-state-default .addMe").live('click',function () 
	{      
		  var $obj;
		  $obj= $(this).parent();		
		  $obj.find(".addMe").remove();
		  $obj.appendTo("#sortable").prepend('<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>').append('<strong class="removeMe">[ - ]</strong>');			   
	});
	//===== remove one ======
	$("#sortable .removeMe").live('click',function () 
	{      
		if(confirm('Are you sure?'))
		{
		  var $obj;
		  $obj= $(this).parent();		
		  $obj.find(".removeMe").remove();	
		  $obj.find(".ui-icon-arrowthick-2-n-s").remove();	  
		  $obj.appendTo("#desortable").append('<strong class="addMe">[ + ]</strong>');				  
		}
	});	
});
</script>
</head>
<body>
<br />
===============================
<br />
<ul id="sortable">
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 <strong class="removeMe">[ - ]</strong></li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 <strong class="removeMe">[ - ]</strong></li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 <strong class="removeMe">[ - ]</strong></li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4 <strong class="removeMe">[ - ]</strong></li>
</ul>
<br />
===============================
<br />
<ul id="desortable">
	<li class="ui-state-default">Item a <strong class="addMe">[ + ]</strong></li>
	<li class="ui-state-default">Item b <strong class="addMe">[ + ]</strong></li>
	<li class="ui-state-default">Item c <strong class="addMe">[ + ]</strong></li>
	<li class="ui-state-default">Item d <strong class="addMe">[ + ]</strong></li>
</ul>

</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s