script.aculo.us 拖放

DragDrop 模块可用于使任何元素可拖动，然后可以将其拖放到放置区域中。

使元素可拖动：可通过创建可拖动实例然后识别要使其可拖动的元素来制作可拖动元素

句法：

new Draggable( element_id, {options} );

可拖动选项：

Options	Description
revert	It is used to specify whether an element should return to its original position after being dragged.
snap	It is used to make a draggable element  constraint its movements.
zindex	It used to specify the z-index in the CSS stylesheet.
ghosting	It is used to specify whether the element should be cloned in the drop area or move to it.
constraint	It is used to specify the draggable directions.
handle	It is used to specify the handle to trigger the dragging.
starteffect	It is used to define the function which is called when the specified  element starts dragging.
revertefffect	it is used to define the function which is called when the specified element reverts the drag.
endeffect	It is used to define the function which is called when the specified element stops dragging.

回调选项：

Options	Description
change	Similar to onDrag triggered when the position of the element changes.
onStart	Triggered when a drag is initiated.
onEnd	Triggered when a drag is finished.
onDrag	Trigged continuously while the element is dragged and the mouse location is changing.

例子：

HTML

  

    
    
      
    
    
      
    
        var elements = ['element'];
        window.onload = function () {
            elements.each(function (item) 
                { new Draggable(item); });
        }          
    

  

    

  

输出：

创建放置区域：现在我们将创建可放置实例以将元素放置在放置区域中。

句法：

Droppables.add( element_id, {options} );

可丢弃选项：

Options	Description
HoverClass	It is used to create an active hoverclass on the drop area.
Containment	It used to specify the id of the draggable element so that another element cannot be dropped in it.
Accept	When true, it only allows the elements having one or more CSS properties to be dropped over it.
Overlap	When a direction is given (horizontal/vertical) it will allow the user to drop the element only. If it is overflowing more than 50% in the given direction.
Greedy	It allows overlapping draggable inside a drop area, the draggable below another element won’t be visible.

回调选项：

Options	Description
onHover	It is triggered when an element hoversover the drop area.
onDrop	It is triggered when an element is dropped in the drop area.

例子：

HTML

  

    
    
      
    
    
      
    
        window.onload = function () {
            $A($('draggable').getElementsByTagName(
                'img')).each(function (item) {
                new Draggable(item, { 
                    revert: true, ghosting: true 
                });
            });
            Droppables.add('dropArea',
                { hoverclass: 'hoverActive', 
                    onDrop: dropAppend }
            );
        }
  
        function dropAppend(draggable, dropArea) {
            draggable.parentNode.removeChild(draggable);
            dropArea.appendChild(draggable);
        }
    
  
    
        #dropArea {
            float: left;
            height: 125px;
            width: 435px;
            border: 3px ridge green;
            padding: 10px;
            float: left;
        }
  
        .hoverActive {
            background-color: #7cfa5c;
        }
  
        #draggable img,
        #dropArea img {
            border: 1px solid green;
        }
    

  

    
    
    
        
    

  

输出：