使用 jquery 的拖放功能

Question

我想实现类似于this website 上给出的示例 1.3 的功能。请帮忙。

Answer 1

这是一个使用演示页面的工作示例demo

对于html

<div id="example-1-3">
            <div class="column left first">
                <ul class="sortable-list">
                    <li class="sortable-item">Sortable item A</li>
                    <li class="sortable-item">Sortable item B</li>
                </ul>

            </div>

            <div class="column left">

                <ul class="sortable-list">
                    <li class="sortable-item">Sortable item C</li>
                    <li class="sortable-item">Sortable item D</li>
                </ul>

            </div>

            <div class="column left">

                <ul class="sortable-list">
                    <li class="sortable-item">Sortable item E</li>
                </ul>

            </div>

            <div class="clearer">&nbsp;</div>

        </div>

对于 js

$(document).ready(function(){
// Example 1.3: Sortable and connectable lists with visual helper
$('#example-1-3 .sortable-list').sortable({
    connectWith: '#example-1-3 .sortable-list',
    placeholder: 'placeholder',
});
});

Answer 2

根据您提到的页面上的代码：

    // Example 1.3: Sortable and connectable lists with visual helper
    $('#example-1-3 .sortable-list').sortable({
        connectWith: '#example-1-3 .sortable-list',
        placeholder: 'placeholder',
    });

只需将connectWith 设置为#id 或.class 即可。 它的 HTML（如链接中的演示所示）将是：

            <div id="example-1-3">

                <div class="column left first">

                    <ul class="sortable-list">
                        <li class="sortable-item">Sortable item A</li>
                        <li class="sortable-item">Sortable item B</li>
                    </ul>

                </div>

                <div class="column left">

                    <ul class="sortable-list">
                        <li class="sortable-item">Sortable item C</li>
                        <li class="sortable-item">Sortable item D</li>
                    </ul>

                </div>

                <div class="column left">

                    <ul class="sortable-list">
                        <li class="sortable-item">Sortable item E</li>
                    </ul>

                </div>

                <div class="clearer">&nbsp;</div>

            </div>

Answer 3

$(function(){
        $('html').niceScroll({cursorcolor:"#639BF6",cursorwidth :10, cursorborder: 'none'});
        //dad simple demo
        $('.dad').dad();
    })

<script src="http://konsolestudio.com/dad/jquery.min.js"></script>
<script src="http://konsolestudio.com/source/jquery.dad.js"></script>
<script src="http://konsolestudio.com/dad/jquery.nicescroll.min.js"></script>
<link href="http://konsolestudio.com/source/jquery.dad.css" rel="stylesheet"/>
<link href="http://konsolestudio.com/dad/demo.css" rel="stylesheet"/>



<div id="daddy" class="dad">
        <div>
            <div>1</div>
        </div>
        <div>
            <div>2</div>
        </div>
        <div>
            <div>3</div>
        </div>
        <div>
            <div>4</div>
        </div>
        <div>
            <div>5</div>
        </div>
        <div>
            <div>6</div>
        </div>
        <div>
            <div>7</div>
        </div>
        <div>
            <div>8</div>
        </div>
        <div>
            <div>9</div>
        </div>
        <div>
            <div>10</div>
        </div>
    </div>

嗨，阿曼，试试这个：

Answer 4

如果它适用于您，请查看以下链接。 Fiddle

$(".DragItem").draggable({
    revert: 'invalid',
    helper: "clone"
});

$(".drop1").droppable({
     accept: '.drag1',
     activeClass: 'DropTargetValid',
     drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
      }
});

$(".drop2").droppable({
    accept: '.drag2',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
    }
});