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

 
<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 = $("<p>").attr("id", "message").text(eventMessages[e.type]);
          $("#status").empty().append(message);
        }
        $("#target").droppable(dropOpts);
    });
  </script>
</head>
<body>
    <div id="drag">drag</div>
    <div id="target">target</div>
    <div id="status">status</div>
</body>
</html>

Droppable accepted function

 
<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>
    <div class="drag" id="drop1">drop1</div>
    <div class="drag" id="drop2">drop2</div>
    
    <div id="target">target</div>

</body>
</html>

Droppable object

 
<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>
    <div id="drag">drag</div>
    <div id="target">target</div>

</body>
</html>

Drop to different objects and get their id

 

<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>
    <div id="drag">drag</div>
    <div class="target" id="outer">outer target
      <div class="target" id="inner">inner target</div>
    </div>
</body>
</html>

Get relative and absolute position of the dropped object

 
<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>
    <div id="container">
          <div id="drag">asdf</div>
    </div>
</body>
</html>

jQuery UI Droppable - Accept Demo

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
  
<div id="draggable-nonvalid" class="ui-widget-content">
  <p>I"m draggable but can"t be dropped</p>
</div>
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
  <p>accept: "#draggable"</p>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Droppable - Prevent propagation

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
  
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
  <p>Outer droppable</p>
  <div id="droppable-inner" class="ui-widget-header">
    <p>Inner droppable (not greedy)</p>
  </div>
</div>
<div id="droppable2" class="ui-widget-header">
  <p>Outer droppable</p>
  <div id="droppable2-inner" class="ui-widget-header">
    <p>Inner droppable (greedy)</p>
  </div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<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>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Droppable - Revert draggable position

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
  
<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>
</div><!-- End demo -->
<div class="demo-description">
<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>
</div><!-- End demo-description -->
</body>
</html>

jQuery UI Droppable - Simple photo manager

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
    <div class="demo ui-widget ui-helper-clearfix">
      <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
        <li class="ui-widget-content ui-corner-tr">
          <h5 class="ui-widget-header">High Tatras</h5>
          <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
          <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
          <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
          <h5 class="ui-widget-header">High Tatras 2</h5>
          <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
          <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
          <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
          <h5 class="ui-widget-header">High Tatras 3</h5>
          <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
          <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
          <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
          <h5 class="ui-widget-header">High Tatras 4</h5>
          <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
          <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
          <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
      </ul>
      <div id="trash" class="ui-widget-content ui-state-default">
        <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
      </div>
    </div><!-- End demo -->
    <div class="demo-description">
      <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>
    </div><!-- End demo-description -->
  </body>
</html>

jQuery UI Droppable - Visual feedback

  
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
<h3 class="docs">Feedback on hover:</h3>
  
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
<h3 class="docs">Feedback on activating draggable:</h3>
<div id="draggable2" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
<div id="droppable2" class="ui-widget-header">
  <p>Drop here</p>
</div>
<!-- add active class demo -->
</div><!-- End demo -->
<div class="demo-description">
<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>
</div><!-- End demo-description -->
</body>
</html>

Mark accepted object

 
<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>
    <div class="drag" id="drop1">drop1</div>
    <div class="drag" id="drop2">drop2</div>
    
    <div id="target">target</div>

</body>
</html>

Mark active class

 
<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>
    <div class="drag" id="drop1">drop1</div>
    <div class="drag" id="drop2">drop2</div>
    
    <div id="target">target</div>

</body>
</html>

JavaScript DHTML/jQuery/UI Droppable

Содержание

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

Droppable accepted function

Droppable object

Drop to different objects and get their id

Get relative and absolute position of the dropped object

jQuery UI Droppable - Accept Demo

jQuery UI Droppable - Prevent propagation

jQuery UI Droppable - Revert draggable position

jQuery UI Droppable - Simple photo manager

jQuery UI Droppable - Visual feedback

Mark accepted object

Mark active class

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты