Jquery UI 可拖动列表项到框

Posted 2023-05-08

【中文标题】Jquery UI 可拖动列表项到框

【英文标题】：Jquery UI Draggable List Item onto Box

【发布时间】：2018-07-24 22:48:08

【问题描述】：

我有一个我想在页面左侧使用的项目列表，这些项目可以拖到另一侧的框中。我希望这些项目可以拖动到框或被删除。我创建了一个jsfiddle，它允许将项目拖到框中，但这并不是我想要的工作方式。我的问题如下：

当盒子变大时，它会重新排序盒子并将它们放入左列。我希望左侧只包含可拖动的项目。 它会闪烁并且并不总是拖动到光标所在的位置。我在 Mac 上使用 chrome。 我还希望能够从盒子中取出物品。

html:

$(".sortable").sortable(
    revert: true
);
$(".draggable").draggable(
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "false",
    placeholder: " droppable-placeholder"
);
$("ul, li").disableSelection();

ul 
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;



li 
    margin: 0.5em;
    padding: 0.5em;
    width: 150px;
    border: 1px solid black;


.draggable-column 
  height:100%;


.droppable-item 
    border: 1px solid black;
    padding: 5px;
    float: left;


.sortable 
    width: 200px;
    min-height: 2em;



.droppable-placeholder 
    background-color: lightgrey;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="">
            <li class="draggable ">1 Drag me onto item</li>
            <li class="draggable ">2 Drag me onto item</li>
            <li class="draggable ">3 Drag me onto item</li>
            <li class="draggable ">4 Drag me onto item</li>
            <li class="draggable ">5 Drag me onto item</li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="col-xs-3 droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 2
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
        <div class="col-xs-3 droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable droppable-placeholder">

            </ul>
        </div>
    </div>

</div>

【问题讨论】：

.row display: flex; /* 孩子 的高度相等/ .col flex: 1; / 另外，等宽 */ padding: 1em;边框：实心； 添加这个 css 作为你的第一点。

【参考方案1】：

终于搞定了如何做到这一点，但它不是特别干净：

$(".sortable").sortable(
    revert: true,
    connectWith: ".draggable"
   
);

$(".draggable").draggable(
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "true",
    placeholder: ".droppable-placeholder",
    
    stop: function(event, ui) 
        console.log("--start of stop");
        var listContainer = $(ui.helper[0].parentElement);
        var newListId = listContainer.attr("id");
        var draggableId = $(this).attr("id");
        var cloneId = newListId + "-" + draggableId;
        console.log("new list id: " + newListId);
        console.log("draggableId: " + draggableId);
        console.log("cloneId: " + cloneId);
        var itemExists = false;
        $("#"+ newListId).find('li').each(function() 
            var sortableItemId = $(this).attr("id");
            console.log("sortable item id " + sortableItemId);
            if (sortableItemId != undefined && sortableItemId == cloneId) 
            	console.log("***  sortable item already exists");
            	itemExists = true;
             
        );
        if (itemExists) 
        	$("#" + cloneId).remove();
        
        $(ui.helper[0]).attr("id", cloneId);
        
        console.log("--end of stop");

    ,

);


$("ul, li").disableSelection();
$(".draggable-column, .droppable-column").on("click", ".close-list-item", function(event) 

    event.preventDefault();
    $(this).closest('li').remove();
);

ul 
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.7em;
    float: left;


li 
    margin: 0.5em;
    padding: 0.5em;
    width: 200px;
    border: 1px solid black;


.draggable-column 
    height: 100%;


.droppable-item 
    padding: 0.5em;
    float: left;
    align-content: space-between;


.droppable-item > h3 
    text-align: center;


.sortable 
    width: 230px;
    height: 10em;
    overflow: auto;
    border: 1px solid black;
    background-color: lightgrey;


.droppable-placeholder 
    background-color: yellow;


.row 
    display: flex;
    /* equal height of the children*/


.col 
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="row">
    <div class="col-xs-4 draggable-column">
        <ul class="" id="draggable-column-list">
            <li class="draggable " id="item1">1 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item2">2 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item3">3 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item4">4 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
            <li class="draggable " id="item5">5 Drag me onto item
                <a href="#" class="close-list-item">
                    <i class="fa fa-window-close"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="col-xs-8 droppable-column">

        <div class="droppable-item">
            <h3>
              Item 1
            </h3>
            <ul class="sortable" id="ul-item1">

            </ul>
        </div>
        <div class="droppable-item">
            <h3 class="">
              Item 2
            </h3>
            <ul class="sortable" id="ul-item2">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 3
            </h3>
            <ul class="sortable" id="ul-item3">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 4
            </h3>
            <ul class="sortable" id="ul-item4">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 5
            </h3>
            <ul class="sortable" id="ul-item5">

            </ul>
        </div>
        <div class="droppable-item">
            <h3>
              Item 6
            </h3>
            <ul class="sortable" id="ul-item6">

            </ul>
        </div>
    </div>

</div>