使用jQuery的拖放功能

Question

I want to implement the functionality something like Example 1.3 given on this website . Please help with that.

Answer 1

Here is a working example demo using the demo page

for 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>

for 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

From the code on the page you've mentioned:

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

Just set the connectWith to an #id or .class and that's it. The HTML (as seen in the demo on the link) for it would be:

            <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

Check with the below link if it works with you. 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());
    }
});

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> 

Hi aman try this: