script.aculo.us 拖放 onHover 选项

script.aculo.us 库是一个跨浏览器库，旨在改进网站的用户界面。拖放模块可用于使任何元素可拖放，也可以将它们拖放到放置区域中。

onHover 选项用于指定当合适的可拖动项悬停在悬停目标上时激活的回调函数。

句法：

{onHover: function}

参数：此选项具有如上所述和如下所述的单个值：

• 函数 ：这是一个回调函数，每当元素悬停在悬停目标上时都会调用该回调函数。

下面的示例说明了此选项的使用。

例子：

HTML

  

    Drag and Drop onHover option
  
    
    
  
    
    
  
    
        #draggables {
            border: 3px ridge blueviolet;
            float: left;
            padding: 9px;
        }
  
        #hoverarea {
            display: flex;
            flex-direction: column;
            float: left;
            margin-left: 40px;
            width: 300px;
            height: 300px;
            border: 3px ridge blue;
            text-align: center;
            font-size: 24px;
        }
  
        .container {
            position: relative;
            text-align: center;
            color: white;
        }
  
        #over {
            display: none;
        }
  
        .hoverActive {
            background-color: #8cdd81;
        }
    
  
    
  
        window.onload = function () {
            // Make the image draggable
  
            $A($('draggables').getElementsByTagName(
                'img')).each(function (item) {
                new Draggable(item, { 
                    revert: true, ghosting: true 
                });
            });
  
            Droppables.add(
                'hoverarea', {
                hoverclass: 'hoverActive',
                onHover: moveItem
            });
        }
  
        // We want display a text when we are 
        // over the hover area
        function moveItem(draggable, hoverarea) {
            document.getElementById(
                "over").style.display = "block";
        }
    

  

  
    
    
        
    
  
    
    
        Hover over this area
  
        
            Over the hover area
        
    

  

输出：