1. 技术文章
  2. jQuery Draggable + Sortable - How to drag and drop between two scrollable lists

jQuery Draggable + Sortable - How to drag and drop between two scrollable lists

由 吃可爱长大的小学妹 提交于 2019-12-04 06:55:42

Whew! That was a fun one to fix.

The first problem, with the list scrolling forever horizontally, I fixed with some simple overflow changes in your CSS. I removed both of the overflow attributes from your .drag_column, and put an overflow: hidden in .drag_container.

.drag_container {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    border: 1px solid black;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.drag_column {
    padding: 5px;
    width: 490px;
    height: 200px;
    float: left;
    position: relative;
}

Unfortunately, when I did that it created a position error when you moved your draggable from one list to another (it would shoot upwards, depending on which list item you chose). To fix this, I added the line "helper: clone" to your draggable creation function.

$( "#available > li" ).draggable({ 
    revert: 'invalid',
    connectToSortable: '#selected',
    containment: '#drag_container',
    helper: 'clone'
});

Once again, this created an undesirable effect. The clone helper makes it so the original list never has items deleted. To fix this, I had to manually create a function that would delete the old item. What I did was I added a start: function to your draggable object, that grabbed the object id and put it in a variable. Then I created a droppable object of your #selected list, and made a drop: function there. That drop function simply does a slideUp(100) on the object with the matching id. Note that I have a variable creation at the initiation of the script - this fixes a bug in IE.

var dragged = null;
$(function() {
    $( "#available > li" ).draggable({ 
        revert: 'invalid',
        connectToSortable: '#selected',
        containment: '#drag_container',
        helper: 'clone',
        start: function(ui, event) {
            dragged = $(this).attr('id');
        }
    });
    $( "#selected" ).droppable({
        drop: function(event, ui) {
            var ident = "#" +  dragged;
            $(ident).slideUp(100);
        }
    });

I posted a page with the full HTML at http://pastehtml.com/view/1by9nfd.html so you can play around if you want. Hope this helps!

Mandeep Jain

I needed this functionality and had found a way to do this

use appendTo: "body" and set position absolute on start. The element being dragged gets appended to body and is alwayz "top" of other elements because its position is absloute to the body.

$( "#available > li" ).draggable({

    revert: 'invalid',
    appendTo: 'body',
    helper: 'clone',
    connectToSortable: '#selected',
    containment: '#drag_container',

start: function( event, ui ){

    $(ui.helper).css('position', 'absolute'); //helper if you are using clone

},


stop: function(event, ui){

    $(ui.helper).css('position', 'relative'); // if you want

} 

});

Hope this helps

标签
jquery
jquery-ui
jquery-ui-draggable
jquery-ui-sortable
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!