Script.aculo.us 简明教程
script.aculo.us - Drag & Drop
Web 2.0 界面的最受欢迎功能就是拖放。幸运的是,script.aculo.us 附带了固有功能以支持拖放。
The most popular feature of Web 2.0 interface is the drag and drop facility. Fortunately script.aculo.us comes with an inherent capability to support drag and drop.
要使用 script.aculo.us 的拖动功能,您需要加载 dragdrop 模块,该模块同时需要 effects 模块。因此,您对 script.aculo.us 进行的最低加载看上去像下面这样:
To use the dragging capabilities of script.aculo.us, you’ll need to load the dragdrop module, which also requires the effects module. So your minimum loading for script.aculo.us will look like this:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
Dragging Things Around
使用 script.aculo.us 制作可拖动的项目非常简单。它需要创建 Draggable 类的实例,并识别要制作成可拖动的元素。
It is very simple to make an item draggable using script.aculo.us. It requires creating an instance of the Draggable class, and identifying the element to be made draggable.
Draggable Syntax
new Draggable( element, options );
构造函数的第一个参数使用元素的 id 或对该元素的引用来标识要制作成可拖动的元素。第二个参数指定有关可拖动元素行为方式的可选信息。
The first parameter to the constructor identifies the element to be made draggable either as the id of the element, or a reference to the element. The second parameter specifies optional information on how the draggable element is to behave.
Draggable Options
创建可拖动对象时,您可以使用以下一个或多个选项。
You can use one or more of the following options while creating your draggable object.
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. |
|
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]. |
|
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. |
|
ghosting |
Boolean determining whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults to false. |
|
constraint |
A string used to limit the draggable directions, either horizontal or vertical. Defaults to null which means free movement. |
|
handle |
Specifies an element to be used as the handle to start the drag operation. By default, an element is its own handle. |
|
starteffect |
An effect called on element when dragging starts. By default, it changes the element’s opacity to 0.2 in 0.2 seconds. |
|
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. |
|
endeffect |
An effect called on element when dragging ends. By default, it changes the element’s opacity to 1.0 in 0.2 seconds. |
Callback Options
此外,你可以在 options 参数中使用以下任何回调函数 −
Additionally, you can use any of the following callback functions in the options parameter −
Function |
Description |
Examples |
onStart |
Called when a drag is initiated. |
|
onDrag |
Called repeatedly when a mouse moves, if mouse position changes from previous call. |
|
change |
Called just as onDrag (which is the preferred callback). |
|
onEnd |
Called when a drag is ended. |
除了“change”回调外,每个这些回调都接受两个参数:可拖动对象和鼠标事件对象。
Except for the "change" callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.
Draggable Example
在此,我们定义了 5 个可拖动元素:三个 <div> 元素、一个 <img> 元素和一个 <span> 元素。三个不同的 <div> 元素的目的是演示以下行为:无论元素最初以何种定位规则(默认值)、相对定位还是绝对定位开始,都不会影响拖拽行为。
Here, we define 5 elements that are made draggable: three <div> elements, an <img> element, and a <span> element. The purpose of the three different <div> elements is to demonstrate that regardless of whether an element starts off with a positioning rule of static (the default), relative, or absolute, the drag behavior is unaffected.
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>
这将生成以下结果:
This will produce following result −
Dropping Dragged Things
通过对 Droppables 名称空间中 add() 方法的调用,可以将某个元素转换为一个拖放目标。
An element is converted into a drop target via a call to the add() method within a namespace called Droppables.
Droppables 名称空间有两种重要的方法:add() 用于创建拖放目标,remove() 用于移除拖放目标。
The Droppables namespace has two important methods: add() to create a drop target, and remove() to remove a drop target.
Syntax
以下是创建拖放目标的 add() 方法的语法。add() 方法创建一个拖放目标,作为其第一个参数传递的元素,使用作为第二个参数传递的 hash 中的选项。
Here is the syntax of the add() method to create a drop target. The add() method creates a drop target out of the element passed as its first parameter, using the options in the hash passed as the second.
Droppables.add( element, options );
remove() 的语法甚至更为简单。remove() 方法从传递的元素中移除拖放目标行为。
The syntax for remove() is even more simpler. The remove() method removes the drop target behavior from the passed element.
Droppables.remove(element);
Options
创建可拖动对象时,您可以使用以下一个或多个选项。
You can use one or more of the following options while creating your draggable object.
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. |
|
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. |
|
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. |
|
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. |
Callback Options
此外,你可以在 options 参数中使用以下任何回调函数 −
Additionally, you can use any of the following callback functions in the options parameter −
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 的元素中所有 <img> 元素的节点列表转换为一个数组。
Here, the first part of this example is similar to our previous example, except that we have used Prototype’s handy $A() function to convert a node list of all the <img> elements in the element with the id of draggables to an array.
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) {
new Draggable(item, {revert: true, ghosting: true});
});
Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
// Set drop area by default non cleared.
$('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>
这将生成以下结果:
This will produce following result −