用scriptaculous增强Web应用程序

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

本文将深入探讨如何利用scriptaculous的一些特性，包括拖放功能、分类等。我们从给一个基本的网页增加拖放特性开始进行说明。

作者：builder.com.cn 2007年1月30日

关键字：

<html><head>

<title>Scriptaculous Example - drag-n-drop with two lists</title>

<script language="JavaScript" src="scriptaculous/lib/prototype.js"></script>

<script language="JavaScript" src="scriptaculous/src/scriptaculous.js"></script>

</head><body

<div style="float:left;">

<h1>Drag-n-drop with Scriptaculous</h1>

<div id="firstlist">

<ul id="group1" class="list">

<li id="element1_1">The first element.</li>

<li id="element1_2">The second element.</li>

<li id="element1_3">The third element.</li>

<li id="element1_4">The fourth element.</li>

<li id="element1_5">The fifth element.</li>

<li id="element1_6">The sixth element.</li>

<li id="element1_7">The seventh element.</li>

<li id="element1_8">The eighth element.</li>

<li id="element1_9">The ninth element.</li>

<li id="element1_10">The tenth element.</li>

</ul></div>

<div id="secondlist">

<ul id="group2">

<li id="element2_1">The first element.</li>

<li id="element2_2">The second element.</li>

<li id="element2_3">The third element.</li>

<li id="element2_4">The fourth element.</li>

<li id="element2_5">The fifth element.</li>

<li id="element2_6">The sixth element.</li>

<li id="element2_7">The seventh element.</li>

<li id="element2_8">The eighth element.</li>

<li id="element2_9">The ninth element.</li>

<li id="element2_10">The tenth element.</li>

</ul></div></div>

<script type="text/javascript">

// <![CDATA[
Sortable.create('group1',{containment:[group1, group2],dragOnEmpty:true, constraint:false});
Sortable.create('group2',{containment:[group1, group2],dragOnEmpty:true, constraint:false});

// ]]>

</script></body></html>

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

用scriptaculous增强Web应用程序

业界热点: