dongtou9934 2015-10-02 05:30
浏览 67
已采纳

在Droppable部分删除后,禁用可拖动的JQuery UI

I have two div section were I'm performing drag/drop and sortable operations i have list of 5 draggable records in my draggable section I want to disable the draggable record as soon as I drop in droppable section to avoid duplicate records placed in droppable div section

HTML CODE

<div>
        <form method="post" action="">
            <ol style='list-style:decimal' id="qselected"></ol>
        </form>
    </div>
    <br/>
    <div>
        <ul id="qlist">
            <?php 
                for($i=1;$i<=5;$i++)
                {
                ?>  
                    <li id='article_<?php echo $i;?>' >
                        <div class="qitem" style='margin-bottom : 20px;border-bottom:1px solid #e7e7e7;'>
                        <span data-item="1" class="question">Value : <?php echo $i;?></span>
                        </div>
                    </li>
                <?php
                }
            ?>
        </ul>
    </div>

JQUERY CODE

 $(document).ready(function() {

        $("#qselected").disableSelection();

        $(".qitem").draggable({
            containment : "#container",
            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4
        });

        $("#qselected, #qlist").droppable({
            revert:true,
            hoverClass : 'ui-state-highlight',
            greedy: true,
            refreshPositions: true,
            drop : function(ev, ui) {
                $(ui.draggable).clone().appendTo(this);
                if($(this)[0].id === "qselected")
                {
                    console.log($(this).closest("button").find('.hello'));
                    $(this).find('.hello').hide();
                    $(this).find('.btn').show();
                    return true;
                }


            },
        }).sortable({
                revert: true,
                refreshPositions: true ,
                helper : 'clone',
                cursor: "move",
                delay: 1,
                tolerance: 'pointer',
                revert: 50
            });
    });
  • 写回答

1条回答 默认 最新

  • douye2572 2015-10-02 05:34
    关注

    In your drop function do this:

    ui.draggable.draggable( 'disable' );
    

    Here is a fiddle for you based on your code: http://jsfiddle.net/j6dqk54p/1/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 slam rangenet++配置
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊