JQuery拖放交换

时间:2011-10-27 14:50:31

标签: jquery-ui

我从另一篇文章中借用了以下代码,它尽可能地工作。我需要在两个项目列表之间切换。我无法弄清楚如何更改多个项目的代码。

我正在使用Coldfusion,所以你看到cfoutput我正在循环查询。我做了两次。一旦开始阵容球员(他们有一个有效的周数)和再次为替补球员。这个想法是将一名替补球员转移到首发阵容。

<html>
<head>
<style>
#wrapper {
   border: thin dotted orange;   
}
</style>
    <script type="text/javascript">

        jQuery.fn.swapWith = function(to) {
            return this.each(function() {
                var copy_to = $(to).clone();
                var copy_from = $(this).clone();
                $(to).replaceWith(copy_from);
                $(this).replaceWith(copy_to);
            });
        };



        $(document).ready(function() {

            options = {
                    revert: true,
                    helper: 'clone'
            };

            $("li").draggable(options);
            $('#wrapper').droppable({
                drop: function(event, ui) {
        //      window.setTimeout(function(){
                    $('#one').swapWith($('#two'));
                    $(".ui-draggable-dragging").remove();
                    $("li").draggable(options);
        //}, 1);
                }
            });
        });

    </script>

</head>
<body>
    <form>
    <ul id="wrapper">
        <li id='one'>
            <div style="width: 100px; height: 100px; border: 1px solid green">
                one<br /></div>
        </li>
        <li id='two'>
            <div style="width: 110px; height: 110px; border: 1px solid red">
                two<br /></div>
        </li>
    </ul>
    <br />
    </form>
</body>
</html>

0 个答案:

没有答案