script.aculo.us 拖放效果选项

此 script.aculo.us Drag & Drop endeffect Option 用于定义当合适的可拖动山墙元素停止被拖动时调用的函数。该函数可用于定义任何效果。

句法：

{ endeffect: effectFunction }

价值观：

• effectFunction：这个值定义了包含当拖动山墙停止被拖动时要显示的效果的函数。

下面的示例说明了拖放结束效果选项：

例子：

HTML

  

    
    
  
    
    
  
    
        window.onload = function () {
  
            $A($('draggables').getElementsByTagName('img'))
                .each(function (item) {
                    new Draggable(item, {
                        revert: true, ghosting: true,
  
                        // Define the effect to be used when 
                        // the draggable is stopped dragging
                        endeffect: function (element) {
                            new Effect.Opacity(element, {
                                from: 0,
                                to: 1.0,
                                duration: 5
                            })
                        }
                    });
                });
  
            Droppables.add('droparea',
                { onDrop: moveItem }
            );
  
            // Set drop area default non cleared.
            $('droparea').cleared = false;
        }
  
        function moveItem(draggable, droparea) {
            if (!droparea.cleared) {
                droparea.innerHTML = '';
                droparea.cleared = true;
            }
  
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
        }
    
    
        #draggables {
            width: 550px;
            height: 73px;
        }
  
        #droparea {
            float: left;
            width: 550px;
            height: 73px;
            border: 2px solid gray;
            text-align: center;
            font-size: 16px;
            padding: 12px;
        }
    

  

    
        
            GeeksforGeeks
        
  
        A Computer Science Portal for Geeks
  
    
    
        script.aculo.us Drag & Drop
        endeffect Option
    
    
        
    
    
    
    
        Drag the Image and Drop Your Image
        in this area
    

  

输出：