拖放支持的最佳ajax框架[关闭]答案

【问题标题】：Best ajax framework for drag and drop support [closed]拖放支持的最佳ajax框架[关闭]
【发布时间】：2009-04-07 05:35:57
【问题描述】：

我必须构建一个应用程序，拖放功能似乎是最繁重的部分。根据以下一项或多项参数，什么是用于拖放的最佳 Ajax 框架：

学习曲线
代码大小
浏览器兼容性

【问题讨论】：

标签： ajax drag-and-drop

【解决方案1】：

我的选择是jQuery UI。

学习曲线很短。我自己是 javascript 框架的新手，我发现它很容易学习。把你的头脑放在选择器上，你就被排序了。当前版本的 jQuery UI 具有针对 dragging 和 dropping 的特定功能。
jQuery UI 允许您自定义您的包，因此您只包含您正在使用的组件（以及核心）。当然，它已被最小化，因此您想要的总大小可以低至 135kb 标记。
您可能不会发现这里的框架之间有太大区别。根据 jQuery 网站，它已经过“在 IE 6.0+、FF 2+、Safari 3.1+、Opera 9.0+ 和 Google Chrome 中的兼容性测试。”

祝你好运！

【讨论】：

谢谢我倾向于 JQuery，很高兴知道其他人同意。
它还有优秀的 api/docs/examples 让你快速入门。
要进行出色的调试，请使用 Firefox 中的 Firebug 插件。只要页面上引用了 jQuery，就可以直接从控制台运行 UI javascript。它可以很容易地看到函数将如何改变页面上的内容。

【解决方案2】：

我最近进行了一项类似的研究，并得出结论认为 JQuery 是要走的路。仅仅因为我发现了最多的可用和可理解的（对我来说就是）代码示例......我在这里发布了其中一个（我忘记了我从哪里剪下来的）。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript" src="/interface/interface.js"></script>
<style type="text/css" media="all">
html
{
    height: 100%;
}
img{
    border: none;
}
body
{
    background: #fff;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.groupWrapper
{
    width: 32%;
    float: left;
    margin-right: 1%;
    min-height: 400px;
}
.serializer
{
    clear: both;
}
.groupItem
{
    margin-bottom: 20px;
}
.groupItem .itemHeader
{
    line-height: 28px;
    background-color: #DAFF9F;
    border-top: 2px solid #B5EF59;
    color: #000;
    padding: 0 10px;
    cursor: move;
    font-weight: bold;
    font-size: 16px;
    height: 28px;
    position: relative;
}

.groupItem .itemHeader a
{
    position: absolute;
    right: 10px;
    top: 0px;
    font-weight: normal;
    font-size: 11px;
    text-decoration: none;
}
.sortHelper
{
    border: 3px dashed #666;
    width: auto !important;
}
.groupWrapper p
{
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div id="sort1" class="groupWrapper">
    <div id="newsFeeder" class="groupItem">

        <div class="itemHeader">Feeds<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <div id="news" class="groupItem">
        <div class="itemHeader">News<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">

            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>

    </div>
    <p>&nbsp;</p>
</div>
<div id="sort2" class="groupWrapper">
    <div id="shop" class="groupItem">
        <div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <p>&nbsp;</p>

</div>
<div id="sort3" class="groupWrapper">
    <div id="links" class="groupItem">
        <div class="itemHeader">Links<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <div id="images" class="groupItem">
        <div class="itemHeader">Images<a href="#" class="closeEl">[-]</a></div>

        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>

        </div>
    </div>
    <p>&nbsp;</p>
</div>
<script type="text/javascript">
$(document).ready(
    function () {
        $('a.closeEl').bind('click', toggleContent);
        $('div.groupWrapper').Sortable(
            {
                accept: 'groupItem',
                helperclass: 'sortHelper',
                activeclass :   'sortableactive',
                hoverclass :    'sortablehover',
                handle: 'div.itemHeader',
                tolerance: 'pointer',
                onChange : function(ser)
                {
                },
                onStart : function()
                {
                    $.iAutoscroller.start(this, document.getElementsByTagName('body'));
                },
                onStop : function()
                {
                    $.iAutoscroller.stop();
                }
            }
        );
    }
);
var toggleContent = function(e)
{
    var targetContent = $('div.itemContent', this.parentNode.parentNode);
    if (targetContent.css('display') == 'none') {
        targetContent.slideDown(300);
        $(this).html('[-]');
    } else {
        targetContent.slideUp(300);
        $(this).html('[+]');
    }
    return false;
};
function serialize(s)
{
    serial = $.SortSerialize(s);
    alert(serial.hash);
};
</script>
<div  class="serializer">
<a href="#" onClick="serialize(); return false;" >serialize all lists</a>
<a href="#" onClick="serialize('sort1'); return false;" >serialize list 1</a>
<a href="#" onClick="serialize('sort2'); return false;" >serialize list 2</a>
<a href="#" onClick="serialize('sort3'); return false;" >serialize list 3</a>

<a href="#" onClick="serialize(['sort1', 'sort3']); return false;" >serialize lists 2 and 3</a>
</div>
        <script language="JavaScript" type="text/javascript">var client_id = 1;</script>
        <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
        <noscript>
        <p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
        </noscript>
</body>
</html>

【讨论】：

谢谢，代码会很有帮助
从哪里获得 interface.js 文件
interface.js 可能是来自 JQuery 网站的一些 JQuery 插件。我不确定了。我会尝试追踪它。

【解决方案3】：

我同意你们所有人对 jQuery 的看法，但我想告诉你们 script.aculo.us 作为替代方案。

1) 学习曲线真的很短

2) 它有点重，因为你需要prototype.js (993kb) 加上dragdrop.js(31kb) 和scriptaculous.js (2kb)

3) 完全支持 IE6+、Firefox（我会说是 1.5+，当然是 2+）和 Safari（肯定是 2+，也许是 1.3+）

链接： Script.aculo.us at GitHub Script.aculo.us Homepage

【讨论】：

【解决方案4】：

jQuery 似乎是目前的市场领导者。它是轻量级的 (19kb)，并且有大量的插件可从社区获得。

(请注意 - 文件大小仅在压缩和 GZipped 时。添加 UI 会增加文件大小)

最常用的插件之一是与改进用户界面相关的插件，称为UI，包括可拖放功能。

jQuery UI 的主页在http://docs.jquery.com/UI

与“拖放”相关的其他插件列表位于http://plugins.jquery.com/project/Plugins/category/45

【讨论】：

值得注意的是 jQuery 核心在压缩和 GZipped 后为 19kB。仅缩小为 56kB。如果你想利用jQuery UI提供的拖放功能，js文件会比这个大一点。
完全正确，我已将您的注释添加到我的答案中。