MooTools - 拖放

更新于 2025/1/26 1:07:17

MooTools 提供了一项强大的功能，可帮助您将拖放功能添加到网页元素中。我们可以通过创建自己的新 Drag.Move 对象来实现这一点。使用此对象，您可以定义选项和事件。Drag 和 Drag.Move 类来自 MooTools More 库。

让我们讨论一下 Drag.Move 对象的选项和事件。

Drag.Move

Drag.Move 是一个用于向 html 元素添加拖放功能的对象。Drag.Move 扩展了 Drag，因此我们可以通过 Drag.Move 对象使用 Drag 类的所有选项和事件。查看以下语法并了解如何使用 Drag.Move 对象。

语法

var myDrag = new Drag.Move(dragElement, {
    // Drag.Move 选项
    droppables: dropElement,
    container: dragContainer,
    
    // 拖动选项
    handle: dragHandle,
    
    // Drag.Move 事件
    // Drag.Move 事件传递被拖动元素，
    // 和放入可放置元素
    onDrop: function(el, dr) {
        // 将提醒放入可放置元素的 id
        alert(dr.get('id'));
    },
    // 拖动事件
    // 拖动事件传递被拖动元素
   onComplete: function(el) {
      alert(el.get('id'));
   }
});

Drag.Move 选项

Drag.Move 提供以下选项来维护具有拖放功能的 html 元素 −

droppable − 这有助于您设置可拖放元素(在拖放相关事件上注册的元素)的选择器。
container − 这有助于您设置拖动元素的容器(将元素保留在里面)。
snap − 这有助于您设置在可拖动元素开始拖动之前用户必须拖动光标多少 px。默认值为 6，您可以将其设置为表示数字的任意数量的变量。
handle − 这有助于您为可拖动元素添加句柄。 Handle 成为唯一接受抓取的元素。

查看以下语法，了解如何以及在何处定义可放置元素、容器元素、捕捉元素和手柄元素。

语法

//此处我们通过 id 定义单个元素
var dragElement = $('drag_element');

//此处我们通过 class 定义元素数组
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');

//现在我们设置 Drag.Move 对象
var myDrag = new Drag.Move(dragElement , {
    // Drag.Move 选项
    // 使用我们上面定义的 droppables 变量设置我们的 droppables 元素
    droppables: dropElements ,
    
    // 使用容器元素变量设置我们的容器元素
    container: dragContainer
    
    // 设置用户必须拖动的像素。
    Snap: 10
    
    // 为可拖动元素添加句柄
    handle: dragHandle
});

Drag.Move 事件

Drag.Move 事件提供不同的功能，可用于不同级别的操作。例如，当您开始拖放对象时，每个 Drag.Move 事件都会将拖动元素或放置元素作为参数传递。

以下是支持的事件 −

onStart()

这会在拖动开始时引发事件。如果您设置了长捕捉，则此事件直到鼠标处于一定距离时才会引发。看一下以下语法。

语法

var myDrag = new Drag.Move(dragElement , {
   // 拖动选项将把拖动的元素作为参数传递
   onStart: function(el) {
      // 将你想要在开始时发生的任何事放在这里
   }
});

onDrag()

这会在您拖动元素时持续引发事件。请查看以下语法。

语法

var myDrag = new Drag.Move(dragElement , {
   // 拖动选项将把拖动的元素作为参数传递
   onDrag: function(el) {
      // 将你想要在拖动时发生的任何事放在这里
   }
});

onDrop()

将可拖动元素放入可放置元素中时，会引发事件。请查看以下语法。

语法

var myDrag = new Drag.Move(dragElement , {
    // 它将传递可拖动元素(本例中为"el")
    // 以及可拖动元素与之交互的可放置元素(此处为"dr")
    onDrop: function(el, dr) {
        // 将您希望在放置时发生的任何操作放入此处
    }
});

onLeave()

当可拖动元素离开可放置元素的边界时，会引发事件。看一下以下语法。

语法

var myDrag = new Drag.Move(dragElement , {
    // 它将传递可拖动元素(本例中为 'el')
    // 以及可拖动元素与之交互的可放置元素(此处为 'dr')
    onLeave: function(el, dr) {
        // 在此处输入离开可放置区域时要发生的任何操作
    }
});

onEnter()

当可拖动元素进入可放置元素区域时，将引发此事件。看看下面的语法。

语法

var myDrag = new Drag.Move(dragElement , {
    // 它将传递可拖动元素(本例中为"el")
    // 以及可拖动元素与之交互的可放置元素(此处为"dr")
    onEnter: function(el, dr) {
        // 当可拖动元素进入可放置元素时，将触发此事件
    }
});

onComplete()

这会引发一个事件。onComplete 指的是您放下可放置元素时，无论您是否落入可放置元素中，它都会引发此事件。看看下面的语法。

语法

var myDrag = new Drag.Move(dragElement , {
   // Drag Options
   // 拖动选项将把拖动的元素作为参数传递
   onComplete: function(el) {
      // 将你想要发生的事情放在完成位置
   }
});

让我们举一个例子来探索本章中解释的所有功能。这些功能包括 — Drag、Drag.Move、onEnter、onLeave、onDrop、onStart、onDrag 和 onComplete。在这个例子中，我们提供了一个 HANDLE，您可以使用它将可拖动对象拖到容器中的任何位置。对于每个操作，左侧都有一个通知(以蓝色表示)。容器中有一个可放置区域。如果可拖动对象进入可放置区域，则激活最后三个指示器。看看下面的代码。

示例

<!DOCTYPE html>
<html>

   <head>
      <style>
         /* this is generally a good idea */
         body {
            margin: 0;
            padding: 0;
         }
         
         /* make sure the draggable element has "position: absolute"
         and then top and left are set for the start position */
         #drag_me {
            width: 100px;
            height: 100px;
            background-color: #333;
            position: absolute;
            top: 0;
            left: 0;
         }
         #drop_here {
            width: 80%;
            height: 200px;
            background-color: #eee;
            margin-left: 100px;
            margin-top: -200px !important;
         }
         /* make sure the drag container is set with position relative */
         #drag_cont {
            background-color: #ccc;
            height: auto;
            width: 500px;
            position:relative;
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: auto;
         }
         #drag_me_handle {
            width: 100%;
            height: auto;
            background-color: #F5B041;
         }
         #drag_me_handle span {
            display: block;
            padding: 20px;
         }
         .indicator {
            width: 100px;
            height: auto;
            background-color: #0066FF;
            border-bottom: 1px solid #eee;
         }
         .indicator span {
            padding: 10px;
            display: block;
         }
         .draggable {
            width: 200px;
            height: 200px;
            background-color: blue;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var dragElement = $('drag_me');
            var dragContainer = $('drag_cont');
            var dragHandle = $('drag_me_handle');
            var dropElement = $$('.draggable');
            var startEl = $('start');
            var completeEl = $('complete');
            var dragIndicatorEl = $('drag_ind');
            var enterDrop = $('enter');
            var leaveDrop = $('leave');
            var dropDrop = $('drop_in_droppable');
            
            var myDrag = new Drag.Move(dragElement, {
               // Drag.Move options
               droppables: dropElement,
               container: dragContainer,
               
               // Drag options
               handle: dragHandle,
               
               // Drag.Move Events
               onDrop: function(el, dr) {
                  if (!dr) { }else {
                     dropDrop.highlight('#FB911C'); //flashes orange
                     el.highlight('#fff'); //flashes white
                     dr.highlight('#667C4A'); //flashes green
                  };
               },
               onLeave: function(el, dr) {
                  leaveDrop.highlight('#FB911C'); //flashes orange
               },
               onEnter: function(el, dr) {
                  enterDrop.highlight('#FB911C'); //flashes orange
               },
               
               // Drag Events
               onStart: function(el) {
                  startEl.highlight('#FB911C'); //flashes orange
               },
               onDrag: function(el) {
                  dragIndicatorEl.highlight('#FB911C'); //flashes orange
               },
               onComplete: function(el) {
                  completeEl.highlight('#FB911C'); //flashes orange
               }
            });
         });
      </script>
   </head>
   
   <body>
   
      <p align = "center">Drag and Drop Application</p>
      <div id = "drag_cont">
         <div id = "start" class = "indicator"><span>Start</span></div>
         <div id = "drag_ind" class = "indicator"><span>Drag</span></div>
         <div id = "complete" class = "indicator"><span>Complete</span></div>
         <div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
         <div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
         
         <div id = "drop_in_droppable" class = "indicator">
            <span>Dropped in Droppable Element</span>
         </div>
         
         <div id = "drag_me">
            <div id = "drag_me_handle"><span>HANDLE</span></div>
         </div>
         
         <div id = "drop_here" class = "draggable">
            <p align = "center">Droppable Area</p>
         </div>
         
      </div>
   </body>
   
</html>

您将收到以下输出，其中，您必须单击"句柄"并拖动它。您现在可以在左侧找到通知指示。

输出

❮ MooTools 输入过滤 MooTools 正则表达式 ❯

MooTools 教程

MooTools 有用资源

MooTools - 拖放

Drag.Move

语法

Drag.Move 选项

语法

Drag.Move 事件

onStart()

onDrag()

onDrop()

onLeave()

onEnter()

onComplete()

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！