script.aculo.us-拖放 - 芒果文档

📌 相关文章

📜 script.aculo.us-拖放

📅 最后修改于: 2020-10-19 04:21:07 🧑 作者: Mango

Web 2.0界面最流行的功能是拖放功能。幸运的是script.aculo.us具有支持拖放的固有功能。

要使用script.aculo.us的拖动功能，您需要加载dragdrop模块，该模块也需要effect模块。因此，您对script.aculo.us的最小加载应如下所示：

拖东西

使用script.aculo.us使项目可拖动非常简单。它需要创建Draggable类的实例，并标识要使其可拖动的元素。

可拖动语法

new Draggable( element, options );

构造函数的第一个参数将要拖动的元素标识为元素的ID或对该元素的引用。第二个参数指定有关可拖动元素行为方式的可选信息。

可拖动选项

创建可拖动对象时，可以使用以下一个或多个选项。

Option	Description	Examples
revert	If set to true, the element returns to its original position when the drag ends. Also specifies whether the reverteffect callback will be invoked when the drag operation stops. Defaults to false.	Example
snap	Used to cause a draggable to snap to a grid or to constrain its movement. If false (default), no snapping or constraining occurs. If it is assigned 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
zindex	Specifies 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
ghosting	Boolean determining whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults to false.	Example
constraint	A string used to limit the draggable directions, either horizontal or vertical. Defaults to null which means free movement.	Example
handle	Specifies an element to be used as the handle to start the drag operation. By default, an element is its own handle.	Example
starteffect	An effect called on element when dragging starts. By default, it changes the element’s opacity to 0.2 in 0.2 seconds.	Example
reverteffect	An effect called on element when the drag is reverted. Defaults to a smooth slide to element’s original position.Called only if revert is true.	Example
endeffect	An effect called on element when dragging ends. By default, it changes the element’s opacity to 1.0 in 0.2 seconds.	Example

回调选项

此外，您可以在options参数中使用以下任何回调函数-

Function	Description	Examples
onStart	Called when a drag is initiated.	Example
onDrag	Called repeatedly when a mouse moves, if mouse position changes from previous call.	Example
change	Called just as onDrag (which is the preferred callback).	Example
onEnd	Called when a drag is ended.	Example

除了“更改”回调外，这些回调中的每一个都接受两个参数：Draggable对象和mouse事件对象。

可拖动的示例

在这里，我们定义了5个可拖动的元素：三个

元素，一个元素和一个元素。这三个不同的

元素的目的是演示无论元素以静态（默认），相对还是绝对的定位规则开始，拖动行为均不受影响。

现场演示

Draggables Elements
        
      
      
      
      
   

   
      
         This is a normal div and this is dragable.
      

      
         This is a relative div and this is dragable.
      

      
         This is an absolute div and this dragable.
      
      

        
      

      Let part  
         This is middle part Yes, only middle part is dragable.

这将产生以下结果-

放下拖拉的东西

可以通过调用名为Droppables的命名空间中的add（）方法将元素转换为放置目标。

Droppables命名空间有两个重要的方法： add（）创建放置目标，以及remove（）删除放置目标。

句法

这是用于创建放置目标的add（）方法的语法。 add（）方法使用作为第二个参数传递的哈希中的选项，从作为第一个参数传递的元素中创建放置目标。

Droppables.add( element, options );

remove（）的语法更加简单。 remove（）方法从传递的元素中删除放置目标的行为。

Droppables.remove(element);

选件

创建可拖动对象时，可以使用以下一个或多个选项。

Option	Description	Examples
Hoverclass	The name of a CSS class that will be added to the element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null.	Example
Accept	A 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
Containment	Specifies 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
Overlap	If 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, discussed in the next chapter.
greedy	If true (default), it stops hovering other droppables, under the draggable won’t be searched.	Example

回调选项

此外，您可以在options参数中使用以下任何回调函数-

Function	Description	Examples
onHover	Specifies a callback function that is activated when a suitable draggable item hovers over the drop target. Used by Sortables, discussed in the next chapter.
onDrop	Specifies a callback function that is called when a suitable draggable element is dropped onto the drop target.	Example

例

在这里，该示例的第一部分与上一示例类似，不同之处在于，我们已使用Prototype的便捷$ A（）函数将id为draggables的元素中所有元素的节点列表转换为数组。

现场演示

Drag and Drop Example
        
      
      
        
      

      
   

   
      
         
         
         
         
         
      

      
         Drag and Drop Your Images in this area

这将产生以下结果-