带有可排序UI的jQuery拖放不起作用

Posted

技术标签:

【中文标题】带有可排序UI的jQuery拖放不起作用【英文标题】:jQuery Drag and Drop with sortable UI not working 【发布时间】:2015-09-01 10:59:32 【问题描述】:

我目前正在尝试使用可排序的列表项创建拖放...但是当我将可拖动的项目移向占位符时,它只是返回到它的位置。任何想法我做错了什么?

我找到了这个方法here,但它似乎对我不起作用。

这是我的 html

<ul id="draggable">

    <li class="to-drag" class="items">
        <h1>1</h1>
        <p>Description 1</p>
    </li>

    <li class="to-drag" class="items">
        <h1>2</h1>
        <p>Description 2</p>
    </li>

    <li class="to-drag" class="items">
        <h1>3</h1>
        <p>Description 3</p>
    </li>

</ul>

<div style="height: 100px; clear: both;"></div>

<ul id="dropzone" class="items">

    <li class="placeholder"></li>

</ul>

这是 jQuery:

$(function() 

    $("#draggable li.to-drag").draggable(

        connectWith: "#dropzone",
        helper: "clone",
        revert: "invalid",
        droppable: "drop"

    );

    $("#dropzone").droppable(

        drop: function( event, ui) 

            $(this).addClass("correct");

        

    );

    $("ul, li").disableSelection();

);

感谢您的帮助! :)

编辑

这是工作的 jQuery:

$(function() 

$("#dropzone").sortable(

    revert: true,
    opacity: 0.5

);

$("#draggable li").draggable(

    connectToSortable: ".items",
    helper: "clone",
    revert: true,
    opacity: 0.5

);

$("li.placeholder").droppable(
    revert: false,

    drop: function (event, ui) 

        var dragging = ui.draggable.clone();

        $(this).append(dragging);

    

);

$("ul, li").disableSelection();

);

【问题讨论】:

【参考方案1】:

你至少有三个主要问题:

Draggable 没有connectWith,它有connectToSortable。 所以你应该改变这个。见文档: http://api.jqueryui.com/draggable/

要使用connectToSortable,您需要sortable,而不是droppable

您需要将drop 事件更改为可排序事件receive 也许或update,取决于你的需要。http://api.jqueryui.com/sortable/

它可能看起来像这样:

$(function() 

    $("#draggable li.to-drag").draggable(

        connectToSortable: "#dropzone",
        helper: "clone",
        revert: "invalid",
        droppable: "drop"

    );

    $("#dropzone").sortable(

        receive: function( event, ui) 

            $(this).addClass("correct");

        

    );

    $("ul, li").disableSelection();

);

【讨论】:

谢谢..在这里您提供了如此清晰的理解。【参考方案2】:

请查看我所做的更改

    $(function() 

    $("#draggable li.to-drag").draggable(
    appendTo: "body",
      helper: "clone",
        revert:"invalid"
    );

    $("#dropzone1").droppable(

        drop:function( event, ui) 
alert(ui.draggable.text())
$("#dropzone").text( ui.draggable.text() ).appendTo( this );


        

    );

    $("ul, li").disableSelection();

);

额外的 div 确保您拖动到右侧面板

    <ul id="draggable">

    <li class="to-drag" class="items">
        <h1>1</h1>
        <p>Description 1</p>
    </li>

    <li class="to-drag" class="items">
        <h1>2</h1>
        <p>Description 2</p>
    </li>

    <li class="to-drag" class="items">
        <h1>3</h1>
        <p>Description 3</p>
    </li>

</ul>

<div style="height: 100px; clear: both;"></div>
<div id="dropzone1" style="border:solid 1px">
    <ul id="dropzone" class="items" >

    <li class="placeholder"></li>

</ul>
</div>

需要一些调整来获得一些额外的功能,但你应该能够做到这一点

您将需要额外的代码来进行排序

查看此链接here 干杯 真实的

【讨论】:

以上是关于带有可排序UI的jQuery拖放不起作用的主要内容,如果未能解决你的问题,请参考以下文章

MailChimp 内容块拖放不起作用

Laravel 5.4 - 拖放不起作用

使用自定义类型标识符拖放不起作用

jQuery 拖放模拟对最后一个可拖动对象不起作用

Selenium Webdriver - 拖放不起作用

WinAppDriver中的拖放不起作用