JavaScript Tutorial/jQuery/UI Droppable

Материал из Web эксперт
Перейти к: навигация, поиск

30. Drag and drop events: activate, deactivate, drop, out, over

   <source lang="javascript">

<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>

drag
target
status

</body> </html></source>


30. Droppable accepted function

   <source lang="javascript">

<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>

drop1
drop2
target

</body> </html></source>


30. Droppable object

   <source lang="javascript">

<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>

drag
target

</body> </html></source>


30. Drop to different objects and get their id

   <source lang="javascript">

<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>

drag
outer target
inner target

</body> </html></source>


30. Get relative and absolute position of the dropped object

   <source lang="javascript">

<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>

asdf

</body> </html></source>


30. jQuery UI Droppable - Accept Demo

   <source lang="javascript">

<!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>I"m draggable but can"t be dropped</p>
 <p>Drag me to my target</p>
 <p>accept: "#draggable"</p>

<p>Specify using the accept option which element (or group of elements) is accepted by the target droppable.</p>

</body> </html></source>


30. jQuery UI Droppable - Prevent propagation

   <source lang="javascript">

<!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>Drag me to my target</p>
 <p>Outer droppable</p>
   <p>Inner droppable (not greedy)</p>
 <p>Outer droppable</p>
   <p>Inner droppable (greedy)</p>

<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>


30. jQuery UI Droppable - Revert draggable position

   <source lang="javascript">

<!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>I revert when I"m dropped</p>
 <p>I revert when I"m not dropped</p>
 <p>Drop me here</p>

<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>


30. jQuery UI Droppable - Simple photo manager

   <source lang="javascript">

<!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>

Trash Trash

     <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>


30. jQuery UI Droppable - Visual feedback

   <source lang="javascript">

<!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:

 <p>Drag me to my target</p>
 <p>Drop here</p>

Feedback on activating draggable:

 <p>Drag me to my target</p>
 <p>Drop here</p>

<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>


30. Mark accepted object

   <source lang="javascript">

<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>

drop1
drop2
target

</body> </html></source>


30. Mark active class

   <source lang="javascript">

<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>

drop1
drop2
target

</body>

</html></source>