JavaScript DHTML/jQuery/UI Droppable
Содержание
- 1 Drag and drop events: activate, deactivate, drop, out, over
- 2 Droppable accepted function
- 3 Droppable object
- 4 Drop to different objects and get their id
- 5 Get relative and absolute position of the dropped object
- 6 jQuery UI Droppable - Accept Demo
- 7 jQuery UI Droppable - Prevent propagation
- 8 jQuery UI Droppable - Revert draggable position
- 9 jQuery UI Droppable - Simple photo manager
- 10 jQuery UI Droppable - Visual feedback
- 11 Mark accepted object
- 12 Mark active class
Drag and drop events: activate, deactivate, drop, out, over
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#drag").draggable(); var dropOpts = { accept: "#drag", activate: eventCallback, deactivate: eventCallback, drop: eventCallback, out: eventCallback, over: eventCallback }; var eventMessages = { dropactivate: "A draggable is active", dropdeactivate: "A draggable is no longer active", drop: "An accepted draggable was dropped on the droppable", dropout: "An accepted draggable has been moved out of the droppable", dropover: "An accepted draggable is over the droppable" }; function eventCallback(e) {var message = $("
").attr("id", "message").text(eventMessages[e.type]); $("#status").empty().append(message); } $("#target").droppable(dropOpts); }); </script> </head> <body>
</body> </html>
</source>
Droppable accepted function
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $(".drag").draggable(); var dropOpts = { accept: dragEnrol, activeClass: "activated" }; function dragEnrol(el) { return (el.attr("id") == "drop1") ? true : false; } $("#target").droppable(dropOpts); }); </script>
</head> <body>
</body> </html>
</source>
Droppable object
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#drag").draggable(); $("#target").droppable(); }); </script>
</head> <body>
</body> </html>
</source>
Drop to different objects and get their id
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#drag").draggable(); var dropOpts = { accept:"#drag", drop:dropCallback, greedy:true }; function dropCallback(e) { alert("The firing droppable was " + e.target.id); } $(".target").droppable(dropOpts); }); </script>
</head> <body>
</body> </html>
</source>
Get relative and absolute position of the dropped object
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var dragOpts = { helper: "clone", stop: getNewPos }; function getNewPos(e, ui) { e.stopPropagation(); alert(ui.position.top + "px from the top, " + ui.position.left + "px to the left of the original object."); alert(ui.absolutePosition.top + "px from the top, and " + ui.absolutePosition.left + "px to the left relative to the page."); } $("#drag").draggable(dragOpts); }); </script>
</head> <body>
</body> </html>
</source>
jQuery UI Droppable - Accept Demo
<source lang="html4strict">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Droppable - Accept Demo</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } </style> <script type="text/javascript"> $(function() { $("#draggable, #draggable-nonvalid").draggable(); $("#droppable").droppable({ accept: "#draggable", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); } }); }); </script>
</head> <body>
<p>Specify using the accept
option which element (or group of elements) is accepted by the target droppable.</p>
</body> </html>
</source>
jQuery UI Droppable - Prevent propagation
<source lang="html4strict">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Droppable - Prevent propagation</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; } #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; } </style> <script type="text/javascript"> $(function() { $("#draggable").draggable(); $("#droppable, #droppable-inner").droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("> p").html("Dropped!"); return false; } }); $("#droppable2, #droppable2-inner").droppable({ greedy: true, activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("> p").html("Dropped!"); } }); }); </script>
</head> <body>
<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the greedy
option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
</body> </html>
</source>
jQuery UI Droppable - Revert draggable position
<source lang="html4strict">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Droppable - Revert draggable position</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; 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>
<p>Return the draggable (or it"s helper) to its original location when dragging stops with the boolean revert
option set on the draggable.</p>
</body> </html>
</source>
jQuery UI Droppable - Simple photo manager
<source lang="html4strict">
<!doctype html> <html lang="en">
<head> <title>jQuery UI Droppable - Simple photo manager</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ .gallery.custom-state-active { background: #eee; } .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } .gallery li h5 { margin: 0 0 0.4em; cursor: move; } .gallery li a { float: right; } .gallery li a.ui-icon-zoomin { float: left; } .gallery li img { width: 100%; cursor: move; } #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */ #trash h4 { line-height: 16px; margin: 0 0 0.4em; } #trash h4 .ui-icon { float: left; } #trash .gallery h5 { display: none; } </style> <script type="text/javascript"> $(function() { // there"s the gallery and the trash var $gallery = $("#gallery"), $trash = $("#trash"); // let the gallery items be draggable $("li",$gallery).draggable({ cancel: "a.ui-icon",// clicking an icon won"t initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: $("#demo-frame").length ? "#demo-frame" : "document", // stick to demo-frame if present helper: "clone", cursor: "move" }); // let the trash be droppable, accepting the gallery items $trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function(ev, ui) { deleteImage(ui.draggable); } }); // let the gallery be droppable as well, accepting items from the trash $gallery.droppable({ accept: "#trash li", activeClass: "custom-state-active", drop: function(ev, ui) { recycleImage(ui.draggable); } }); // image deletion function 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>"; function deleteImage($item) { $item.fadeOut(function() { var $list = $("ul",$trash).length ? $("ul",$trash) : $("<ul class="gallery ui-helper-reset"/>").appendTo($trash); $item.find("a.ui-icon-trash").remove(); $item.append(recycle_icon).appendTo($list).fadeIn(function() { $item.animate({ width: "48px" }).find("img").animate({ height: "36px" }); }); }); } // image recycle function 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>"; function recycleImage($item) { $item.fadeOut(function() { $item.find("a.ui-icon-refresh").remove(); $item.css("width","96px").append(trash_icon).find("img").css("height","72px").end().appendTo($gallery).fadeIn(); }); } // image preview function, demonstrating the ui.dialog used as a modal window function viewLargerImage($link) { var src = $link.attr("href"); var title = $link.siblings("img").attr("alt"); var $modal = $("img[src$=""+src+""]"); if ($modal.length) { $modal.dialog("open") } else { var img = $("<img alt=""+title+"" width="384" height="288" style="display:none;padding: 8px;" />") .attr("src",src).appendTo("body"); setTimeout(function() { img.dialog({ title: title, width: 400, modal: true }); }, 1); } } // resolve the icons behavior with event delegation $("ul.gallery > li").click(function(ev) { var $item = $(this); var $target = $(ev.target); if ($target.is("a.ui-icon-trash")) { deleteImage($item); } else if ($target.is("a.ui-icon-zoomin")) { viewLargerImage($target); } else if ($target.is("a.ui-icon-refresh")) { recycleImage($item); } return false; }); }); </script> </head> <body>
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p> <p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p> <p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
</body>
</html>
</source>
jQuery UI Droppable - Visual feedback
<source lang="html4strict">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Droppable - Visual feedback</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } </style> <script type="text/javascript"> $(function() { $("#draggable").draggable(); $("#droppable").droppable({ hoverClass: "ui-state-active", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); } }); $("#draggable2").draggable(); $("#droppable2").droppable({ accept: "#draggable2", activeClass: "ui-state-hover", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); } }); }); </script>
</head> <body>
Feedback on hover:
Feedback on activating draggable:
<p>Change the droppable"s appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the hoverClass
or activeClass
options to specify respective classes.</p>
</body> </html>
</source>
Mark accepted object
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $(".drag").draggable(); var dropOpts = { accept: "#drop1", activeClass: "activated" }; $("#target").droppable(dropOpts); }); </script>
</head> <body>
</body> </html>
</source>
Mark active class
<source lang="html4strict">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $(".drag").draggable(); var dropOpts = { accept: "#drop1", activeClass: "activated" }; $("#target").droppable(dropOpts); }); </script>
</head> <body>
</body> </html>
</source>