I have to build an app and the drag and drop functionality seems to be the most onerous part. What is the best Ajax framework for Drag and Drop according to one or more of the following parameters:
- Learning curve
- Code size
- Browser compatibility
views:
990answers:
4
+5
A:
My pick would be jQuery UI.
The learning curve is short. A newbie to javascript frameworks myself, I found it to be very easy to learn. Get your head around selectors and you're sorted. The current version of jQuery UI has specific functionality for dragging and dropping.
jQuery UI lets you customize your package so you only include the components you're using (as well as the core). Of course it's minimized so the total size for what you want could be as low as the 135kb mark.
You probably won't find much difference between frameworks here. According to the jQuery website, it's been tested for "compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome."
Good luck!
Damovisa
2009-04-07 05:47:12
Thanks I was tending towards JQuery, good to know others agree.
Ankur
2009-04-07 05:49:13
It also has excellent api/docs/examples to get you started quickly.
Alconja
2009-04-07 05:50:38
For great debugging, use the Firebug plugin in Firefox. As long as jQuery is referenced on the page, you can run UI javascript directly from the console. It makes it really easy to see how functions will change things on the page.
Damovisa
2009-04-07 06:01:38
+1
A:
I've recently done a similar research and I concluded that JQuery was the way to go. Just because I found the highest amount of usable and understandable (for me that is) code examples... one of which I post here (I forgot where I clipped it from).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/interface/interface.js"></script>
<style type="text/css" media="all">
html
{
height: 100%;
}
img{
border: none;
}
body
{
background: #fff;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.groupWrapper
{
width: 32%;
float: left;
margin-right: 1%;
min-height: 400px;
}
.serializer
{
clear: both;
}
.groupItem
{
margin-bottom: 20px;
}
.groupItem .itemHeader
{
line-height: 28px;
background-color: #DAFF9F;
border-top: 2px solid #B5EF59;
color: #000;
padding: 0 10px;
cursor: move;
font-weight: bold;
font-size: 16px;
height: 28px;
position: relative;
}
.groupItem .itemHeader a
{
position: absolute;
right: 10px;
top: 0px;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}
.sortHelper
{
border: 3px dashed #666;
width: auto !important;
}
.groupWrapper p
{
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="sort1" class="groupWrapper">
<div id="newsFeeder" class="groupItem">
<div class="itemHeader">Feeds<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<div id="news" class="groupItem">
<div class="itemHeader">News<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<p> </p>
</div>
<div id="sort2" class="groupWrapper">
<div id="shop" class="groupItem">
<div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<p> </p>
</div>
<div id="sort3" class="groupWrapper">
<div id="links" class="groupItem">
<div class="itemHeader">Links<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<div id="images" class="groupItem">
<div class="itemHeader">Images<a href="#" class="closeEl">[-]</a></div>
<div class="itemContent">
<ul>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
$(document).ready(
function () {
$('a.closeEl').bind('click', toggleContent);
$('div.groupWrapper').Sortable(
{
accept: 'groupItem',
helperclass: 'sortHelper',
activeclass : 'sortableactive',
hoverclass : 'sortablehover',
handle: 'div.itemHeader',
tolerance: 'pointer',
onChange : function(ser)
{
},
onStart : function()
{
$.iAutoscroller.start(this, document.getElementsByTagName('body'));
},
onStop : function()
{
$.iAutoscroller.stop();
}
}
);
}
);
var toggleContent = function(e)
{
var targetContent = $('div.itemContent', this.parentNode.parentNode);
if (targetContent.css('display') == 'none') {
targetContent.slideDown(300);
$(this).html('[-]');
} else {
targetContent.slideUp(300);
$(this).html('[+]');
}
return false;
};
function serialize(s)
{
serial = $.SortSerialize(s);
alert(serial.hash);
};
</script>
<div class="serializer">
<a href="#" onClick="serialize(); return false;" >serialize all lists</a>
<a href="#" onClick="serialize('sort1'); return false;" >serialize list 1</a>
<a href="#" onClick="serialize('sort2'); return false;" >serialize list 2</a>
<a href="#" onClick="serialize('sort3'); return false;" >serialize list 3</a>
<a href="#" onClick="serialize(['sort1', 'sort3']); return false;" >serialize lists 2 and 3</a>
</div>
<script language="JavaScript" type="text/javascript">var client_id = 1;</script>
<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
<noscript>
<p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
</noscript>
</body>
</html>
tharkun
2009-04-07 05:51:05
A:
jQuery seems to the market leader at the moment. It is lightweight (19kb) and has a large number of plugins available from the community.
(Please note - the file size is only when when minified and GZipped. Adding UI will increase the file size)
One of the most used plugins is that which relates to improving the User Interface is called UI and includes draggable and droppable as functionality.
The home page of the jQuery UI is at http://docs.jquery.com/UI
A list of other plugins whih relate to 'drag and drop' is located at http://plugins.jquery.com/project/Plugins/category/45
Jon Winstanley
2009-04-07 05:53:19
It's worth noting that it's the jQuery core that's 19kB when minified and GZipped. Minified only it's 56kB. If you want to make use of the drag-drop functionality provided by jQuery UI, the js file will be a bit bigger than this.
Damovisa
2009-04-07 06:11:02
A:
I agree with all of you with jQuery, but I would like to tell you script.aculo.us as an alternative.
1) Learning curve is really short
2) It's a bit heavy because you need prototype.js (993kb) plus dragdrop.js(31kb) and scriptaculous.js (2kb)
3) Fully supports IE6+, Firefox (I’d say 1.5+, 2+ certainly), and Safari (2+ for sure, perhaps 1.3+)
baijiu
2009-04-07 06:17:50