2009-02-07 16:00:01 +00:00
<!doctype html>
< html lang = "en" >
< head >
2009-02-07 17:40:54 +00:00
< title > Droppable Visual Test - Droppable ticket 4088< / title >
2010-02-16 01:38:23 +00:00
< link type = "text/css" href = "../../../themes/base/jquery.ui.all.css" rel = "stylesheet" / >
2010-02-16 02:39:57 +00:00
< script type = "text/javascript" src = "../../../jquery-1.4.2.js" > < / script >
2009-09-17 10:39:12 +00:00
< script type = "text/javascript" src = "../../../ui/jquery.ui.core.js" > < / script >
2009-12-16 22:20:18 +00:00
< script type = "text/javascript" src = "../../../ui/jquery.ui.widget.js" > < / script >
2009-12-22 19:51:24 +00:00
< script type = "text/javascript" src = "../../../ui/jquery.ui.mouse.js" > < / script >
2009-09-17 10:39:12 +00:00
< script type = "text/javascript" src = "../../../ui/jquery.ui.sortable.js" > < / script >
< script type = "text/javascript" src = "../../../ui/jquery.ui.droppable.js" > < / script >
2009-02-07 16:00:01 +00:00
< link type = "text/css" href = "../demos.css" rel = "stylesheet" / >
< style type = "text/css" >
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#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; }
#trash { width: 58%; height: 8em; padding: 1%; margin-top: 1%; }
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
< / style >
< script type = "text/javascript" >
$(function() {
$("#sortable").sortable();
$("#trash").droppable({
accept: '#sortable > li',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
if (ui.draggable.is('#special')) {
setTimeout(function() { ui.draggable.remove(); }, 1);
} else {
ui.draggable.remove();
ui.draggable.html('< strong > I was dropped and removed, but still here I am!< / strong > ');
}
}
});
});
< / script >
< / head >
< body >
2009-02-07 17:33:52 +00:00
< h1 >
Ticket < a href = "http://dev.jqueryui.com/ticket/4088" > #4088< / a > - Unable to remove() ui.draggable (sortable item) immediately after the drop callback.
< / h2 >
< h2 >
TEST: Drag 'Special Item' to the div labelled 'Drop here'
< / h2 >
< h2 >
TEST: Drag a 'Normal Item' to the div labelled 'Drop here'
< / h2 >
2009-02-07 16:00:01 +00:00
< ul id = "sortable" >
2009-02-07 17:33:52 +00:00
< li class = "ui-state-default" id = "special" > < span class = "ui-icon ui-icon-arrowthick-2-n-s" > < / span > Special Item< / li >
< li class = "ui-state-default" > < span class = "ui-icon ui-icon-arrowthick-2-n-s" > < / span > Normal Item 1< / li >
< li class = "ui-state-default" > < span class = "ui-icon ui-icon-arrowthick-2-n-s" > < / span > Normal Item 2< / li >
< li class = "ui-state-default" > < span class = "ui-icon ui-icon-arrowthick-2-n-s" > < / span > Normal Item 3< / li >
2009-02-07 16:00:01 +00:00
< / ul >
< div id = "trash" class = "ui-widget-content ui-state-default" >
2009-02-07 17:33:52 +00:00
< h4 class = "ui-widget-header" > < span class = "ui-icon ui-icon-trash" > Trash< / span > Drop here< / h4 >
2009-02-07 16:00:01 +00:00
< / div >
2009-02-07 17:33:52 +00:00
< h3 >
ASSERT: The dropped item is removed from the original list and the following text does not appear: "< strong > I was dropped and removed, but still here I am!< / strong > "
< / h3 >
2009-02-07 16:00:01 +00:00
< / body >
< / html >
