Permalink
Please
sign in to comment.
Showing
with
91 additions
and 91 deletions.
- +47 −47 demos/droppable/revert.html
- +44 −44 demos/sortable/droppable.html
@@ -1,47 +1,47 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Droppable - revert</title> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script> | ||
<style type="text/css"> | ||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } | ||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; } | ||
</style> | ||
<script type="text/javascript"> | ||
$(function() { | ||
$("#draggable").draggable({ revert: 'valid' }); | ||
$("#draggable2").draggable({ revert: 'invalid' }); | ||
$("#droppable").droppable({ | ||
activeClass: 'ui-state-hover', | ||
hoverClass: 'ui-state-active', | ||
drop: function(event, ui) { | ||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); | ||
} | ||
}); | ||
}); | ||
</script> | ||
</head> | ||
<body> | ||
|
||
<div id="draggable" class="ui-widget-content"> | ||
<p>I revert when I'm dropped</p> | ||
</div> | ||
|
||
<div id="draggable2" class="ui-widget-content"> | ||
<p>I revert when I'm not dropped</p> | ||
</div> | ||
|
||
<div id="droppable" class="ui-widget-header"> | ||
<p>Drop me here</p> | ||
</div> | ||
|
||
</body> | ||
</html> | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Droppable - revert</title> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script> | ||
<style type="text/css"> | ||
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } | ||
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; } | ||
</style> | ||
<script type="text/javascript"> | ||
$(function() { | ||
$("#draggable").draggable({ revert: 'valid' }); | ||
$("#draggable2").draggable({ revert: 'invalid' }); | ||
$("#droppable").droppable({ | ||
activeClass: 'ui-state-hover', | ||
hoverClass: 'ui-state-active', | ||
drop: function(event, ui) { | ||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); | ||
} | ||
}); | ||
}); | ||
</script> | ||
</head> | ||
<body> | ||
|
||
<div id="draggable" class="ui-widget-content"> | ||
<p>I revert when I'm dropped</p> | ||
</div> | ||
|
||
<div id="draggable2" class="ui-widget-content"> | ||
<p>I revert when I'm not dropped</p> | ||
</div> | ||
|
||
<div id="droppable" class="ui-widget-header"> | ||
<p>Drop me here</p> | ||
</div> | ||
|
||
</body> | ||
</html> |
@@ -1,44 +1,44 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Sortable - Default Demo</title> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script> | ||
<style type="text/css"> | ||
ul { list-style-type: none; margin: 0; padding: 0; } | ||
li { margin: 3px; padding: 2px; width: 150px; } | ||
.ui-widget-header { height: 60px; margin-bottom: 10px; float: right; width: 200px; } | ||
</style> | ||
<script type="text/javascript"> | ||
$(function() { | ||
$("ul").sortable(); | ||
$("div").droppable({ | ||
activeClass: 'ui-state-hover', | ||
hoverClass: 'ui-state-active', | ||
drop: function(event, ui) { | ||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); | ||
} | ||
}); | ||
}); | ||
</script> | ||
</head> | ||
<body> | ||
|
||
<div class="ui-widget-header"> | ||
<p>Drop a list item on me - sortable items are automatically connected to droppables.</p> | ||
</div> | ||
|
||
<ul> | ||
<li class="ui-state-default">Item 1</li> | ||
<li class="ui-state-default">Item 2</li> | ||
<li class="ui-state-default">Item 3</li> | ||
<li class="ui-state-default">Item 4</li> | ||
<li class="ui-state-default">Item 5</li> | ||
</ul> | ||
|
||
</body> | ||
</html> | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Sortable - Default Demo</title> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script> | ||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script> | ||
<style type="text/css"> | ||
ul { list-style-type: none; margin: 0; padding: 0; } | ||
li { margin: 3px; padding: 2px; width: 150px; } | ||
.ui-widget-header { height: 60px; margin-bottom: 10px; float: right; width: 200px; } | ||
</style> | ||
<script type="text/javascript"> | ||
$(function() { | ||
$("ul").sortable(); | ||
$("div").droppable({ | ||
activeClass: 'ui-state-hover', | ||
hoverClass: 'ui-state-active', | ||
drop: function(event, ui) { | ||
$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); | ||
} | ||
}); | ||
}); | ||
</script> | ||
</head> | ||
<body> | ||
|
||
<div class="ui-widget-header"> | ||
<p>Drop a list item on me - sortable items are automatically connected to droppables.</p> | ||
</div> | ||
|
||
<ul> | ||
<li class="ui-state-default">Item 1</li> | ||
<li class="ui-state-default">Item 2</li> | ||
<li class="ui-state-default">Item 3</li> | ||
<li class="ui-state-default">Item 4</li> | ||
<li class="ui-state-default">Item 5</li> | ||
</ul> | ||
|
||
</body> | ||
</html> |
0 comments on commit
ae282a9