script.aculo.us 拖放重影选项

script.aculo.us是一个JavaScript框架，它提供了许多交互式动画效果和组件。其中一项功能是拖放（Drag and Drop），可以轻松地在网页上创建可拖动的元素。在此基础上，script.aculo.us还提供了一个重影（Sortable）组件，使得拖动的元素可以自动排序。

安装和使用

要使用script.aculo.us，可以从官方网站（https://script.aculo.us/）下载它的代码。也可以使用CDN（Content Delivery Network）进行引用，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js" integrity="sha512-tDhChWMwm2y/kOkejK45ciLRzfHELaZ0cqXDpzwFupc8mWJmz0/1NYpBbz9y0YoDkMhir51bVmOjNPlkdBBd+A==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.css" integrity="sha512-NRNCU/BdeHGc1NUvF8jWMW6w4U4Zg3hJCT55x2jz+D/xFAybfYX/jAcvcp1sWub1wT+ZBWfAnjKBAcz8xiTJKA==" crossorigin="anonymous" />

在网页上使用script.aculo.us的重影组件，需要先创建一个列表（List），并将列表项（List Item）放入其中。然后使用Sortable.create函数，将列表元素与选项对象（Options Object）一起传递给它，如下所示：

<ul id="myList">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

<script>
    Sortable.create('myList', { 
        ghosting: true, 
        onChange: function() { alert('列表项已排序'); } 
    });
</script>

在这个例子中，我们将要排序的列表的ID设置为“myList”，然后创建一个选项对象，其中ghosting属性设置为true，表示在拖动列表项时，会创建一个重影，以便用户可以清楚地看到该项的位置。onChange属性指定了一个JavaScript函数，当用户修改列表项的顺序时，将调用该函数来通知用户。

可选参数

在上面的例子中，我们使用了ghosting和onChange两个选项，还有其他几个可用选项：

• constraint：用于定义可以排序的列表项的范围（例如一个类名），默认为'*'（表示所有列表项）。

• handle：用于指定拖动列表项时的手柄（例如一个类名或元素），默认为null（表示整个列表项）。

• only：用于指定仅允许拖动的列表项，可以是数组、复制的元素或CSS选择器，默认为false（表示所有列表项）。

• overlap：用于定义重影与列表项的重叠程度，可以是数值或字符串top/bottom/center/0..1，默认为'center'。

• scroll：用于定义拖动时的滚动元素，可以是元素或window，默认为window。

• scrollSensitivity：用于定义滚动灵敏度（多远才开始滚动），默认为20。

• scrollSpeed：用于定义滚动速度（每个时间间隔滚动多远），默认为15。

• tag：用于定义列表外部包装器的标签名，例如div或ol，默认为null。

总结

使用script.aculo.us的重影组件，可以方便地为网页元素创建可拖拽的排序功能。这种组件功能强大、易于使用，并且有许多可选参数，可以满足各种需求。了解script.aculo.us的详细信息，请访问官方网站或查看文档。