JavaScript Tutorial/jQuery/UI Droppable — различия между версиями

Текущая версия на 08:25, 26 мая 2010

Содержание

1 30. Drag and drop events: activate, deactivate, drop, out, over
2 30. Droppable accepted function
3 30. Droppable object
4 30. Drop to different objects and get their id
5 30. Get relative and absolute position of the dropped object
6 30. jQuery UI Droppable - Accept Demo
7 30. jQuery UI Droppable - Prevent propagation
8 30. jQuery UI Droppable - Revert draggable position
9 30. jQuery UI Droppable - Simple photo manager
10 30. jQuery UI Droppable - Visual feedback
11 30. Mark accepted object
12 30. Mark active class

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

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

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

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

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

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

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

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

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

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

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

30. 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 Tutorial/jQuery/UI Droppable — различия между версиями

Текущая версия на 08:25, 26 мая 2010

Содержание

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

30. Droppable accepted function

30. Droppable object

30. Drop to different objects and get their id

30. Get relative and absolute position of the dropped object

30. jQuery UI Droppable - Accept Demo

30. jQuery UI Droppable - Prevent propagation

30. jQuery UI Droppable - Revert draggable position

30. jQuery UI Droppable - Simple photo manager

30. jQuery UI Droppable - Visual feedback

30. Mark accepted object

30. Mark active class

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Версия 18:52, 25 мая 2010 (просмотреть исходный код) (обсуждение)	Текущая версия на 08:25, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)