Tutorials Point


  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

script.aculo.us Drag 'n' Drop


previous next AddThis Social Bookmark Button


Advertisements

The most popular feature of Web 2.0 interface is drag and drop facility. Fortunately script.aculo.us comes with strong support for drag and drop capability.

To use script.aculo.us's dragging capabilities, you'll need to load the dragdrop module, which requires the effects module also. So your minimum loading for script.aculo.us will look like this:

<script type="text/javascript" 
   src="/javascript/prototype.js">
</script>
<script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects,dragdrop">
</script>

Dragging Things Around:

This is very simple to make an item drag able using scriptaculous. It requires just a creation of an instance of the Draggable class, and identifying the element to be made draggable.

Draggable Syntax:

new Draggable( element, options );

The first parameter to the constructor identifies the element to be made draggable either as the id of the element, or a reference to the element. The second parameter specifies optional information on how the draggable element is to behave.

Draggable Options:

You can use or more of the following options while creating your draggable object.

OptionDescriptionExamples
revertIf set to true, the element returns to its original position when the drags ends. Also specifies whether the reverteffect callback will be invoked when the drag operation stops. Defaults to false.Example
snapUsed to cause a draggable to snap to a grid or to constrain its movement. If false (default), no snapping or constraining occurs. If an integer x, the draggable will snap to a grid of x pixels. If an array [x, y], the horizontal dragging will snap to a grid of x pixels and the vertical will snap to y pixels. It can also be a function conforming to Function( x , y , draggable ) that returns an array [x, y].Example
zindexSpecifies the CSS z-index to be applied to the element during a drag operation. By default the element's z-index is set to 1000 while dragging.Example
ghostingBoolean determining whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults to false.Example
constraintA string used to limit the draggable directions, either horizontal or vertical. Defaults to null which means free movement.Example
handleSpecifies an element to be used as the handle to start the drag operation. By default an element is its own handle.Example
starteffectAn effect called on element when dragging starts. By default, it changes element's opacity to 0.2 in 0.2 seconds.Example
reverteffectAn effect called on element when the drag is reverted. Defaults to a smooth slide to element's original position. Only called if revert is true.Example
endeffectAn effect called on element when dragging ends. By default, it changes element's opacity to 1.0 in 0.2 seconds.Example

Callback Options:

Additionally, you can use any of the following callback functions in the options parameter :

FunctionDescriptionExamples
onStartCalled when a drag is initiated.Example
onDragCalled repeatedly when a mouse moves, if mouse position changed from previous call.Example
changeCalled just as onDrag (which is the preferred callback).Example
onEndCalled when a drag is ended.Example

Except for the "change" callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.

Draggable Example:

Here, we define 5 elements that are made draggable: three <div> elements, an <img> element, and a <span> element. The purpose of the three different <div> elements is to demonstrate that regardless of whether an element starts off with a positioning rule of static (the default), relative, or absolute, that the drag behavior is unaffected.

<html>
<head>
<title>Draggables Elements</title>
<script type="text/javascript" 
        src="/javascript/prototype.js"></script>
<script type="text/javascript"
        src="/javascript/scriptaculous.js"></script>

<script type="text/javascript">
// Take all the elements whatever you want to make Draggable.
   var elements = [
   'normaldiv',
   'relativediv',
   'absolutediv',
   'image',
   'span'
   ];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
   elements.each(
       function(item) {
           new Draggable(item, {});
       }
   );
}
</script>

</head>
<body>
<div id="normaldiv">
This is a normal div and this is dragable.
</div>

<div id="relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>

<div id="absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id="image" src="/images/scriptaculous.gif"/>

<p>Let part <span id="span" style="color: blue;"> 
This is middle part</span> Yes, only middle part is dragable.</p>
</body>

To understand it in better way you can Try it yourself with different options discussed in above table.

Dropping Dragged Things:

An element is converted into a drop target via a call to the add() method within a namespace called Droppables.

The Droppables namespace has two important methods: add() to create a drop target, and remove() to remove a drop target.

Droppables Syntax:

Here is the syntax of the add() method to create a drop target. The add() method creates a drop target out of the element passed as its first parameter, using the options in the hash passed as the second.

Droppables.add( element, options );

and the syntax for remove() is even more simpler. The remove() method removes the drop target behavior from the passed element.

Droppables.remove(element);

Droppables Options:

You can use or more of the following options while creating your draggable object.

OptionDescriptionExamples
HoverclassThe name of a CSS class that will be added to element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null.Example
AcceptA string or an array of strings describing CSS classes. The droppable will only accept draggables that have one or more of these CSS classes.Example
ContainmentSpecifies an element, or array of elements, that must be a parent of a draggable item in order for it to be accepted by the drop target. By default, no containment constraints are applied.Example
OverlapIf set to 'horizontal' or 'vertical' the droppable will only react to a Draggable if its overlapping by more than 50% in the given direction. Used by Sortables and discussed in next chapter. 
greedyIf true (default), stops processing hovering other droppables under the draggable won't be searched.Example

Callback Options:

Additionally, you can use any of the following callback functions in the options parameter :

FunctionDescriptionExamples
onHoverSpecifies a callback function that is activated when a suitable draggable item hovers over the drop target. Used by Sortables and discussed in next chapter. 
onDropSpecifies a callback function that is called when a suitable draggable element is dropped onto the drop target.Example

Droppables Example:

Here first part of this example is similar to our previous example except we used Prototype's handy $A() function to convert a node list of all the <img> elements in the element with the id of draggables to an array.

<html>
<head>
<title>Drag and Drop Example</title>
<script type="text/javascript" 
        src="/javascript/prototype.js"></script>
<script type="text/javascript"
        src="/javascript/scriptaculous.js"></script>

<script type="text/javascript">
   window.onload = function() {
   // Make all the images draggables from draggables division.
   $A($('draggables').getElementsByTagName('img')).each(
      function(item) {
         new Draggable(
            item,
            {
               revert: true,
               ghosting: true
            }
         );
      }
   );

   Droppables.add(
     'droparea',
     {
        hoverclass: 'hoverActive',
        onDrop: moveItem
     }
  );
   // Set drop area by default  non cleared.
   $('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
   if (!droparea.cleared) {
      droparea.innerHTML = '';
      droparea.cleared = true;
   }
   draggable.parentNode.removeChild(draggable);
   droparea.appendChild(draggable);
}
</script>
<style type="text/css">
#draggables {
   width: 172px;
   border: 3px ridge blue;
   float: left;
   padding: 9px;
}
#droparea {
   float: left;
   margin-left: 16px;
   width: 172px;
   border: 3px ridge maroon;
   text-align: center;
   font-size: 24px;
   padding: 9px;
   float: left;
}
.hoverActive {
   background-color: #ffffcc;
}
#draggables img, #droparea img {
   margin: 4px;
   border:1px solid red;
}
</style>
</head>
<body>
<div id="draggables">
   <img src="/images/html.gif"/>
   <img src="/images/css.gif"/>
   <img src="/images/xhtml.gif"/>
   <img src="/images/wml_logo.gif"/>
   <img src="/images/javascript.gif"/>
</div>

<div id="droparea">
   Drag and Drop Your Images in this area
</div>
</body>
</html>

To understand it in better way you can Try it yourself with different options discussed in above table.



previous next Printer Friendly

Advertisements


  

Advertisements