JavaScript DHTML/Scriptaculous/Drag Drop

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

Add delay to drag and drop

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>script.aculo.us functional test</title>
 <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script>
 <script type="text/javascript" src="scriptaculous-js-1.8.2/src/effects.js"></script>
 <script type="text/javascript" src="scriptaculous-js-1.8.2/src/dragdrop.js"></script>
 <script type="text/javascript">
  
  var myStartEffect = function(element) {
    element._opacity = Element.getOpacity(element);
    new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
    new Effect.Highlight(element, {});
  }
  
 </script>
 <style type="text/css">
 
  h1 {font-size: 1.2em; text-align:center;}
  li {
          margin: 5px auto;
          padding: 2px;
          width: 200px;
          text-align:center;
          list-style-type:none;
          border: 2px solid #779;
          background-color: #dde
  }
  div {
          margin: 5px auto;
          padding: 2px;
          width: 300px;
          text-align:center;
          border: 2px solid #797;
          background-color: #ded
  }
 
 </style>

</head> <body>

No delay sortable

  • one
  • two
  • three

Delayed sortable (500 ms)

  • one
  • two
  • three

No delay draggable

   Lorem ipsum

Delayed draggable (1000 ms)

   Lorem ipsum
 <script type="text/javascript" charset="utf-8">
   Sortable.create("sort1", {starteffect: myStartEffect});
   Sortable.create("sort2", {starteffect:myStartEffect, delay:500});
   new Draggable("drag1", {starteffect:myStartEffect});
   new Draggable("drag2", {starteffect:myStartEffect, delay:1000});
 </script>

</body> </html>

 </source>
   
  


Drag and drop between two tables

   <source lang="html4strict">


<html> <head> <title>Drag & Drop</title> <style type="text/css"> td {

width: 10em;
text-align: center;

} table.mytable {

 list-style-type: none;
 padding: 4px 4px 0 4px;
 margin: 0px;
 font-size: 13px;
 font-family: Arial, sans-serif;

} table.mytable tr {

 margin-bottom: 4px;
 padding: 2px 2px;
 border: 1px solid #c00;
 background-color: #eee;

} div.draggable {

 cursor:move;
 padding:2px;
 background-color: #BBCCDD;

} div.dropsite {

 padding:2px;
 background-color: #DDBB99;

} div.hoverclass123 {

 border:1px solid red;

} </style> <script language="JavaScript" type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <script language="JavaScript" type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script> <script language="JavaScript" type="text/javascript"> Position.includeScrollOffsets = true; window.onload = function() {

 var t1 = document.getElementById("t1");
 add_divs(t1, "td", "draggable");
 var trs = t1.getElementsByTagName("tr");
 for (var i = 0; i < trs.length; i++)
 {
   var divs = document.getElementsByClassName("draggable", trs[i]);
   var drag_text = divs[2].innerHTML;
   for (var j = 0; j < divs.length; ++j)
   {
     new Draggable(divs[j], {ghosting:true, revert:true});
   }
 }
 var t2 = document.getElementById("t2");
 add_divs(t2, "td", "dropsite");
 var divs = document.getElementsByClassName("dropsite", t2);
 for (var j = 0; j < divs.length; ++j)
 {
   Droppables.add(divs[j], {accept:"draggable",
                  hoverclass:"hoverclass123",
                  onDrop:function(element, dropon, event)
                    { debug("dropped " + element.innerHTML + " on "
                         + dropon.innerHTML + "\n")}});
 }

}; function debug(text) {

  document.getElementById("debug").innerHTML
= "
" + text + "
";

} function add_divs(table, tag, classname) {

 var items = table.getElementsByTagName(tag);
 for (var i = 0; i < items.length; i++)
   items[i].innerHTML =
"
" + items[i].innerHTML + "
";

}

</script> </head> <body>

Drag from this table:

one1uno
two2dos
three3tres
four4quatro
five5cinco
six6seis
seven7siete
eight8ocho
nine9nueve
ten10diez

<p>Drop on this table:

eleven11once
twelve12doce
thirteen13trece
fourteen14catorce
fifteen15quince
sixteen16dieciseis
seventeen17diecisiete
eightteen18dieciocho
nineteen19diecinueve
twenty20veinte

</body> </html>

 </source>
   
  


Drag and drop: force to scroll

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"> Position.includeScrollOffsets = true; Draggables.clear = function (event) {

 while (Draggables.drags.length) {
   var d = Draggables.drags.pop();
   var e = d.element;
   d.stopScrolling();
   d.destroy();
   d.element = null;
   if (e.parentNode) {e.parentNode.removeChild(e)}; 
 }

} function cleanup() { //try to remove circular references

 lis = document.getElementsByTagName("li");
 for (i = 0; i < lis.length; i++) {
   if (lis[i].longListItem) {lis[i].longListItem.destroy();}
   else if (lis[i].container) {lis[i].container.destroy();}
 }
 Draggables.clear();

} window.onload = function() {

 var li = $("masterList").getElementsByTagName("LI");
 for (var i = 0; i < li.length; i++) {
   //var d = new LongListItem(li[i]);
   //li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);
   var d = new Draggable(li[i], 
     {revert: true,
      ghosting: false,
      scroll: "rightContainers"
     });
 }
 
 var divs = $("rightContainers").getElementsByTagName("div");
 for (i = 0; i < divs.length; i++) {
   if (divs[i].className && Element.hasClassName(divs[i], "container")) {
     Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
   }
 }
 Event.observe(window, "unload", cleanup, false);

} </script> <style type="text/css"> html, body {

 margin:0; padding: 0;
 height: 100% !important;

} body {

 position:relative;
 color: black;
 background-color: white;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: small;

} h1 {font-size:115%;} h2 {font-size: 110%;} h3 {font-size: 105%;} div, p, li, td {

 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: small;

} p {margin: 0 0 .7em 0; padding:0;} ul {

 position:relative;
 list-style: none;
 margin:0; padding:0;
 overflow: visible;

} li {position:relative;} .instructions {font-style:italic;}

  1. leftDiv {
 position: absolute;
 top: 0;  left: 0;   bottom: 0;
 width: 30%;
 margin: 0; padding: 7px;
 border-right: 2px solid #bb9;
 background-color: #eed;

}

  1. leftDiv li, #rightContainers div.container li {
 margin: 3px 0; padding: 3px 3em 3px 10px;
 border: 2px solid #456;
 background-color: #cde;
 cursor: move;

}

  1. rightContainers {
 padding: .5em;
 position: absolute;
 top: 0; bottom: 0; right: 0; left: 35%;
 overflow:auto;

}

  1. rightContainers div.container{
 background-color: #bb9;
 margin: 0 0 40px 0; padding: 0 0 1px 0;
 border: 2px solid #775;

}

  1. rightContainers div.container h2{
 margin:0; padding: 2px 1em 0 1em;
 text-align:center;

}

  1. rightContainers div.container ul {
 margin: 5px; padding: 0 3px;
 background-color: white;
 border: 1px solid black;

}

  1. rightContainers div.container ul.empty {
 padding: 3px 0;

}

  1. rightContainers div.hover {
 background-color: #eed;

} </style>

</head> <body>

<form id="frmContinue" action="#" method="post">

Shrink your window until the right-hand pane is scrollable.

Drag from the list on left to groups on the right, force the right-hand pane to scroll.

<input name="data" type="hidden" value=" "> </form>

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight

</form>

Group 1

    Group 2

      Group 3

        Group 4

          Group 5

            Group 6

              Group 7

                Group 8

                  Group 9

                    </body> </html>

                     </source>
                       
                      
                    


                    Drag and drop: ghosting effect

                       <source lang="html4strict">
                    
                    


                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    

                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

                     <title>script.aculo.us Drag and drop functional test file</title>
                     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                     <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
                    

                    </head> <body style="background-color:#eee;">

                    (inside position:relative container)

                    script.aculo.us Drag and drop functional test file

                    Draggables/Droppables

                     Ghosting effect
                     <input type="text" value="blah"/>
                    
                    test!
                     

                    <a href="#" onclick="alert($("hurradiegams").innerHTML); return false;">alert contents of test div</a>

                     Ghost effect

                    <script type="text/javascript" language="javascript" charset="utf-8">

                     Position.includeScrollOffsets = true;
                     new Draggable("absolute_positioned_element",{ghosting: true});
                     new Draggable("absolute_positioned_element2",{ghosting: true, revert:true});
                    

                    </script>

                    </body> </html>

                     </source>
                       
                      
                    


                    Drag and drop: hover class

                       <source lang="html4strict">
                    
                    


                    <html> <head> <title>script.aculo.us Drag and drop functional test file</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> </head> <style>

                     div.hoverclass123 {
                       border:1px solid red;
                     }
                    

                    </style> <body>

                    script.aculo.us Drag and drop functional test file

                    w/o hoverclass

                        1. DROP HERE ###

                    <script type="text/javascript">Droppables.add("cart", {onDrop:function(element,dropon){alert("w/o hoverclass, should be \"product_id\":" + encodeURIComponent(element.id) + ", dropon should be \"cart\":" + dropon.id)}})</script>
                    <img alt="Product2" id="product_id" src="icon.png" /> <-- drag this! <script type="text/javascript">new Draggable("product_id", {revert:true})</script>

                    w/ hoverclass

                        1. DROP HERE ###

                    <script type="text/javascript">Droppables.add("carth", {hoverclass:"hoverclass123",onDrop:function(element, dropon, event){alert("w/ hoverclass: should be \"product_id\":" + encodeURIComponent(element.id) + ", dropon should be \"carth\":" + dropon.id)}})</script>

                    </body> </html>

                     </source>
                       
                      
                    


                    Drag and drop: invert

                       <source lang="html4strict">
                    
                    


                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    

                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

                     <title>script.aculo.us Drag and drop functional test file</title>
                     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                     <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
                     <style type="text/css" media="screen">
                       #thelist li { background: green; margin:5px; padding: 30px; }
                       #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
                     </style>
                    

                    </head> <body>

                    script.aculo.us Drag and drop functional test file

                    Draggables/Droppables

                     drag here
                    <input type="checkbox" id="shouldrevert1"/> Revert?
                     drag here
                    <input type="checkbox" id="shouldrevert2"/> Revert? I"ve onStart, onDrag and onEnd events!
                     This box overrides the default endeffect
                    
                     This box overrides the default starteffect
                    
                     This box overrides the default end- and starteffects
                    
                    accepts first box
                    accepts second box

                    <script type="text/javascript" language="javascript" charset="utf-8">

                     new Draggable("revertbox1",{scroll:window,handle:"handle1",revert:function(element){return ($("shouldrevert1").checked)}});
                     new Draggable("revertbox2",{
                       handle:"handle2",
                       revert:function(element){return ($("shouldrevert2").checked)},
                       onStart:function(){$("revertbox2").setStyle({backgroundColor:"#bfb"})},
                       onDrag:function(){$("event-info").update("drag!")},
                       onEnd:function(){alert("end!")}
                     });
                     
                     Droppables.add("droptarget1",{accept:["box1","otherstuff"],onDrop:function(){alert("drop!")}});
                     Droppables.add("droptarget2",{accept:"box",onDrop:function(){alert("drop!")}});
                     
                     
                     new Draggable("specialbox",{
                       endeffect:function(){
                         new Effect.Highlight("specialbox",{queue:"end"});
                       }
                     });
                     new Draggable("specialbox2",{
                       starteffect:function(){
                         new Effect.Highlight("specialbox2",{queue:"end"});
                       }
                     });
                     new Draggable("specialbox3",{
                       starteffect:function(){
                         new Effect.Highlight("specialbox3",{queue:"end"});
                       },
                       endeffect:function(){
                         new Effect.Highlight("specialbox3",{queue:"end"});
                       }
                     });
                    

                    </script>

                    </body> </html>

                     </source>
                       
                      
                    


                    Drag and drop: snap

                       <source lang="html4strict">
                    
                    


                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    

                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

                     <title>script.aculo.us Drag and drop functional test file</title>
                     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                     <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
                     <style type="text/css" media="screen">
                       div.box { background: green; width:100px; height:100px }
                       div.box-container { background: yellow; width:200px; height:200px }
                     </style>
                    

                    </head> <body>

                    script.aculo.us Drag and drop functional test file

                    Draggables/Droppables

                     Normal box
                    
                     snap: 25
                    
                     snap: [5,25]
                    
                     snap: procedural (e.g. constrain to box)
                    
                       snap: procedural (e.g. constrain to parent element)
                    

                    <script type="text/javascript" language="javascript" charset="utf-8">

                     new Draggable("box-normal",{snap:false,revert:true});
                     new Draggable("box-grid-numeric",{snap:25,revert:true});
                     new Draggable("box-grid-array",{snap:[5,25],revert:true});
                     new Draggable("box-grid-procedural",{
                       snap: function(x,y) {
                         return[
                           x<100 ? (x > 0 ? x : 0 ) : 100,
                           y<50 ? (y > 0 ? y : 0) : 50];
                       },
                       revert:true
                     });
                     new Draggable("box-grid-procedural-gets-draggable",{
                       snap: function(x,y,draggable) {
                         function constrain(n, lower, upper) {
                           if (n > upper) return upper;
                           else if (n < lower) return lower;
                           else return n;
                         }
                        
                         element_dimensions = Element.getDimensions(draggable.element);
                         parent_dimensions = Element.getDimensions(draggable.element.parentNode);
                         return[
                           constrain(x, 0, parent_dimensions.width - element_dimensions.width),
                           constrain(y, 0, parent_dimensions.height - element_dimensions.height)];
                       },
                       revert:true
                     });
                    

                    </script>

                    </body> </html>

                     </source>
                       
                      
                    


                    Drag and drop to reorder

                       <source lang="html4strict">
                    
                    


                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    

                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

                     <title>script.aculo.us Drag and drop functional test file</title>
                     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                     <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
                     <style type="text/css" media="screen">
                       #thelist li { background: green; margin:5px; padding: 30px; }
                       #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
                     </style>
                    

                    </head> <body>

                    script.aculo.us Drag and drop functional test file

                    Draggables/Droppables

                    • Relatively here!
                    • <input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    
                    

                    <script type="text/javascript" language="javascript" charset="utf-8"> // Sortable.create("thelist", {overlap: "horizontal", constraint: false}); Position.includeScrollOffsets = true; Sortable.create("thelist2",{scroll:"scroll-container"});

                    </script> </body> </html>

                     </source>
                       
                      
                    


                    Draggable handle

                       <source lang="html4strict">
                    
                    


                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    

                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

                     <title>script.aculo.us Drag and drop functional test file</title>
                     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                     <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
                     <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
                     <style type="text/css" media="screen">
                       #thelist li { background: green; margin:5px; padding: 30px; }
                       #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
                       #revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; }
                     </style>
                    

                    </head> <body>

                    script.aculo.us Drag and drop functional test file

                    Draggables/Droppables

                    <a href="#" onclick="alert($H(Sortable.sortables).inspect());return false">inspect sortables</a>

                     drag here
                     (but not here)
                    <input type="checkbox" id="shouldrevert1"/> Revert?
                     drag here
                    <input type="checkbox" id="shouldrevert2"/> Revert?
                    testtest

                    <script type="text/javascript" language="javascript" charset="utf-8">

                     new Draggable("revertbox1",{scroll:window,zindex:-5,handle:"handle1",revert:function(element){return ($("shouldrevert1").checked)}});
                     new Draggable("revertbox2",{scroll:window,handle:"handle2",revert:function(element){return ($("shouldrevert2").checked)}});
                     Droppables.add("xxxx",{accept:["box1","box2"],onDrop:function(){alert("drop!")}});
                    

                    </script>


                    • Hey there! I"m absolutely positioned
                    • one
                      <form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form>
                    • two
                      <form id="form2"><input type="text" id="xyx"></input></form>
                    • three
                      <form id="form3"><input type="text" id="xu3"></input></form>
                    • Relatively here!
                    • <input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one
                    • one

                    <script type="text/javascript" language="javascript" charset="utf-8"> // Sortable.create("thelist", {overlap: "horizontal", constraint: false}); Sortable.create("thelist"); Sortable.create("thelist2");

                    </script> </body> </html>

                     </source>
                       
                      
                    


                    Draggable with scroll bar

                       <source lang="html4strict">
                    
                    

                    <html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {

                     new Draggable("my", { scroll: "container" });
                    

                    });

                    </script> </head> <body>

                    A

                    Drag this around!

                    C

                    </body> </html>

                     </source>
                       
                      
                    


                    Droppable target

                       <source lang="html4strict">
                    
                    


                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>

                     <head>
                       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                       <title></title>
                       <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
                       <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
                     </head>
                     <body>
                    
                         Draggable
                    
                       <script type="text/javascript">
                       
                       new Draggable("source", {
                         revert:"failure", 
                         onDropped: function(element){ $(element).update("I WAS DROPPED!") },
                         reverteffect: function(element, top_offset, left_offset) {
                           var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
                           new Effect.Move(element, { 
                             x: -left_offset, y: -top_offset, duration: dur,
                             transition: Effect.Transitions.spring,
                             queue: {scope:"_draggable", position:"end"}
                           });
                         }
                       });
                       
                       </script>
                       
                       
                         Good Target
                    
                        <script type="text/javascript">
                        
                        Droppables.add("target", {
                          onDrop:function(element){ Effect.Puff($("source")); }
                        });
                        
                        </script>
                       
                        
                    </body>

                    </html>

                     </source>
                       
                      
                    


                    Ghosting vs. non-ghosting

                       <source lang="html4strict">
                    
                    

                    <html> <head> <title>Untitled Document</title> <script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script> <script type="text/javascript"> Event.observe(window, "load", function() {

                     new Draggable("regular");
                     new Draggable("ghostly", { ghosting: true });
                    

                    });

                    </script> </head> <body>

                    This drags regularly

                    This drags with ghosting

                    </body> </html>

                     </source>