http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2FUI_Droppable
JavaScript Tutorial/jQuery/UI Droppable - История изменений
2026-04-04T15:14:11Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/UI_Droppable&diff=9573&oldid=prev
Admin: 1 версия
2010-05-26T08:25:10Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/UI_Droppable&diff=9572&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:57Z
<p></p>
<p><b>Новая страница</b></p><div>==30. Drag and drop events: activate, deactivate, drop, out, over==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script> <br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#drag").draggable();<br />
var dropOpts = {<br />
accept: "#drag",<br />
activate: eventCallback,<br />
deactivate: eventCallback,<br />
drop: eventCallback,<br />
out: eventCallback,<br />
over: eventCallback<br />
};<br />
var eventMessages = {<br />
dropactivate: "A draggable is active",<br />
dropdeactivate: "A draggable is no longer active",<br />
drop: "An accepted draggable was dropped on the droppable",<br />
dropout: "An accepted draggable has been moved out of the droppable",<br />
dropover: "An accepted draggable is over the droppable"<br />
};<br />
function eventCallback(e) {<br />
var message = $("<p>").attr("id", "message").text(eventMessages[e.type]);<br />
$("#status").empty().append(message);<br />
}<br />
$("#target").droppable(dropOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="drag">drag</div><br />
<div id="target">target</div><br />
<div id="status">status</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Droppable accepted function==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script> <br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$(".drag").draggable();<br />
var dropOpts = {<br />
accept: dragEnrol,<br />
activeClass: "activated"<br />
};<br />
function dragEnrol(el) {<br />
return (el.attr("id") == "drop1") ? true : false;<br />
}<br />
$("#target").droppable(dropOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="drag" id="drop1">drop1</div><br />
<div class="drag" id="drop2">drop2</div><br />
<br />
<div id="target">target</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Droppable object==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script> <br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#drag").draggable();<br />
$("#target").droppable();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="drag">drag</div><br />
<div id="target">target</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Drop to different objects and get their id==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script> <br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#drag").draggable();<br />
var dropOpts = {<br />
accept:"#drag",<br />
drop:dropCallback,<br />
greedy:true<br />
};<br />
function dropCallback(e) {<br />
alert("The firing droppable was " + e.target.id);<br />
}<br />
$(".target").droppable(dropOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="drag">drag</div><br />
<div class="target" id="outer">outer target<br />
<div class="target" id="inner">inner target</div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Get relative and absolute position of the dropped object==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var dragOpts = {<br />
helper: "clone", <br />
stop: getNewPos<br />
};<br />
<br />
function getNewPos(e, ui) {<br />
<br />
e.stopPropagation(); <br />
alert(ui.position.top + "px from the top, " + ui.position.left + "px to the left of the original object.");<br />
alert(ui.absolutePosition.top + "px from the top, and " + ui.absolutePosition.left + "px to the left relative to the page.");<br />
}<br />
<br />
<br />
$("#drag").draggable(dragOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="drag">asdf</div><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Droppable - Accept Demo==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Droppable - Accept Demo</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }<br />
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#draggable, #draggable-nonvalid").draggable();<br />
$("#droppable").droppable({<br />
accept: "#draggable",<br />
activeClass: "ui-state-hover",<br />
hoverClass: "ui-state-active",<br />
drop: function(event, ui) {<br />
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");<br />
}<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<br />
<div id="draggable-nonvalid" class="ui-widget-content"><br />
<p>I"m draggable but can"t be dropped</p><br />
</div><br />
<div id="draggable" class="ui-widget-content"><br />
<p>Drag me to my target</p><br />
</div><br />
<div id="droppable" class="ui-widget-header"><br />
<p>accept: "#draggable"</p><br />
</div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Droppable - Prevent propagation==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Droppable - Prevent propagation</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }<br />
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }<br />
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#draggable").draggable();<br />
$("#droppable, #droppable-inner").droppable({<br />
activeClass: "ui-state-hover",<br />
hoverClass: "ui-state-active",<br />
drop: function(event, ui) {<br />
$(this).addClass("ui-state-highlight").find("> p").html("Dropped!");<br />
return false;<br />
}<br />
});<br />
$("#droppable2, #droppable2-inner").droppable({<br />
greedy: true,<br />
activeClass: "ui-state-hover",<br />
hoverClass: "ui-state-active",<br />
drop: function(event, ui) {<br />
$(this).addClass("ui-state-highlight").find("> p").html("Dropped!");<br />
}<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<br />
<div id="draggable" class="ui-widget-content"><br />
<p>Drag me to my target</p><br />
</div><br />
<div id="droppable" class="ui-widget-header"><br />
<p>Outer droppable</p><br />
<div id="droppable-inner" class="ui-widget-header"><br />
<p>Inner droppable (not greedy)</p><br />
</div><br />
</div><br />
<div id="droppable2" class="ui-widget-header"><br />
<p>Outer droppable</p><br />
<div id="droppable2-inner" class="ui-widget-header"><br />
<p>Inner droppable (greedy)</p><br />
</div><br />
</div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>When working with nested droppables &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Droppable - Revert draggable position==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Droppable - Revert draggable position</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }<br />
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#draggable").draggable({ revert: "valid" });<br />
$("#draggable2").draggable({ revert: "invalid" });<br />
$("#droppable").droppable({<br />
activeClass: "ui-state-hover",<br />
hoverClass: "ui-state-active",<br />
drop: function(event, ui) {<br />
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");<br />
}<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<br />
<div id="draggable" class="ui-widget-content"><br />
<p>I revert when I"m dropped</p><br />
</div><br />
<div id="draggable2" class="ui-widget-content"><br />
<p>I revert when I"m not dropped</p><br />
</div><br />
<div id="droppable" class="ui-widget-header"><br />
<p>Drop me here</p><br />
</div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Return the draggable (or it"s helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Droppable - Simple photo manager==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Droppable - Simple photo manager</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.resizable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.dialog.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */<br />
.gallery.custom-state-active { background: #eee; }<br />
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }<br />
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }<br />
.gallery li a { float: right; }<br />
.gallery li a.ui-icon-zoomin { float: left; }<br />
.gallery li img { width: 100%; cursor: move; }<br />
#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */<br />
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }<br />
#trash h4 .ui-icon { float: left; }<br />
#trash .gallery h5 { display: none; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
// there"s the gallery and the trash<br />
var $gallery = $("#gallery"), $trash = $("#trash");<br />
// let the gallery items be draggable<br />
$("li",$gallery).draggable({<br />
cancel: "a.ui-icon",// clicking an icon won"t initiate dragging<br />
revert: "invalid", // when not dropped, the item will revert back to its initial position<br />
containment: $("#demo-frame").length ? "#demo-frame" : "document", // stick to demo-frame if present<br />
helper: "clone",<br />
cursor: "move"<br />
});<br />
// let the trash be droppable, accepting the gallery items<br />
$trash.droppable({<br />
accept: "#gallery > li",<br />
activeClass: "ui-state-highlight",<br />
drop: function(ev, ui) {<br />
deleteImage(ui.draggable);<br />
}<br />
});<br />
// let the gallery be droppable as well, accepting items from the trash<br />
$gallery.droppable({<br />
accept: "#trash li",<br />
activeClass: "custom-state-active",<br />
drop: function(ev, ui) {<br />
recycleImage(ui.draggable);<br />
}<br />
});<br />
// image deletion function<br />
var recycle_icon = "<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>";<br />
function deleteImage($item) {<br />
$item.fadeOut(function() {<br />
var $list = $("ul",$trash).length ? $("ul",$trash) : $("<ul class="gallery ui-helper-reset"/>").appendTo($trash);<br />
$item.find("a.ui-icon-trash").remove();<br />
$item.append(recycle_icon).appendTo($list).fadeIn(function() {<br />
$item.animate({ width: "48px" }).find("img").animate({ height: "36px" });<br />
});<br />
});<br />
}<br />
// image recycle function<br />
var trash_icon = "<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>";<br />
function recycleImage($item) {<br />
$item.fadeOut(function() {<br />
$item.find("a.ui-icon-refresh").remove();<br />
$item.css("width","96px").append(trash_icon).find("img").css("height","72px").end().appendTo($gallery).fadeIn();<br />
});<br />
}<br />
// image preview function, demonstrating the ui.dialog used as a modal window<br />
function viewLargerImage($link) {<br />
var src = $link.attr("href");<br />
var title = $link.siblings("img").attr("alt");<br />
var $modal = $("img[src$=""+src+""]");<br />
if ($modal.length) {<br />
$modal.dialog("open")<br />
} else {<br />
var img = $("<img alt=""+title+"" width="384" height="288" style="display:none;padding: 8px;" />")<br />
.attr("src",src).appendTo("body");<br />
setTimeout(function() {<br />
img.dialog({<br />
title: title,<br />
width: 400,<br />
modal: true<br />
});<br />
}, 1);<br />
}<br />
}<br />
// resolve the icons behavior with event delegation<br />
$("ul.gallery > li").click(function(ev) {<br />
var $item = $(this);<br />
var $target = $(ev.target);<br />
if ($target.is("a.ui-icon-trash")) {<br />
deleteImage($item);<br />
} else if ($target.is("a.ui-icon-zoomin")) {<br />
viewLargerImage($target);<br />
} else if ($target.is("a.ui-icon-refresh")) {<br />
recycleImage($item);<br />
}<br />
return false;<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo ui-widget ui-helper-clearfix"><br />
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"><br />
<li class="ui-widget-content ui-corner-tr"><br />
<h5 class="ui-widget-header">High Tatras</h5><br />
<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /><br />
<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><br />
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a><br />
</li><br />
<li class="ui-widget-content ui-corner-tr"><br />
<h5 class="ui-widget-header">High Tatras 2</h5><br />
<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /><br />
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><br />
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a><br />
</li><br />
<li class="ui-widget-content ui-corner-tr"><br />
<h5 class="ui-widget-header">High Tatras 3</h5><br />
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /><br />
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><br />
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a><br />
</li><br />
<li class="ui-widget-content ui-corner-tr"><br />
<h5 class="ui-widget-header">High Tatras 4</h5><br />
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /><br />
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a><br />
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a><br />
</li><br />
</ul><br />
<div id="trash" class="ui-widget-content ui-state-default"><br />
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4><br />
</div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p><br />
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p><br />
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Droppable - Visual feedback==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Droppable - Visual feedback</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }<br />
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#draggable").draggable();<br />
$("#droppable").droppable({<br />
hoverClass: "ui-state-active",<br />
drop: function(event, ui) {<br />
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");<br />
}<br />
});<br />
<br />
$("#draggable2").draggable();<br />
$("#droppable2").droppable({<br />
accept: "#draggable2",<br />
activeClass: "ui-state-hover",<br />
drop: function(event, ui) {<br />
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");<br />
}<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<h3 class="docs">Feedback on hover:</h3><br />
<br />
<div id="draggable" class="ui-widget-content"><br />
<p>Drag me to my target</p><br />
</div><br />
<div id="droppable" class="ui-widget-header"><br />
<p>Drop here</p><br />
</div><br />
<h3 class="docs">Feedback on activating draggable:</h3><br />
<div id="draggable2" class="ui-widget-content"><br />
<p>Drag me to my target</p><br />
</div><br />
<div id="droppable2" class="ui-widget-header"><br />
<p>Drop here</p><br />
</div><br />
<!-- add active class demo --><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Change the droppable"s appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mark accepted object==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script> <br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$(".drag").draggable();<br />
<br />
var dropOpts = {<br />
accept: "#drop1",<br />
activeClass: "activated"<br />
};<br />
<br />
$("#target").droppable(dropOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="drag" id="drop1">drop1</div><br />
<div class="drag" id="drop2">drop2</div><br />
<br />
<div id="target">target</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mark active class==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.draggable.js"></script><br />
<script type="text/javascript" src="js/ui/ui.droppable.js"></script> <br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$(".drag").draggable();<br />
<br />
var dropOpts = {<br />
accept: "#drop1",<br />
activeClass: "activated"<br />
};<br />
<br />
$("#target").droppable(dropOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="drag" id="drop1">drop1</div><br />
<div class="drag" id="drop2">drop2</div><br />
<br />
<div id="target">target</div><br />
<br />
</body><br />
</html></source></div>