使用jQuery的拖放功能

Question

我想實現此網站上提供的類似於示例1.3的功能。 請幫忙。

Answer 1

這是一個工作示例演示使用演示頁面

對於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的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

檢查下面的鏈接是否適合您。 小提琴

$(".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());
    }
});

Answer 4

 $(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> 

嗨，阿曼試試這個：