Question

即时通讯使用jquery ui拖放和可排序的方法我可以从一个div部分拖放内容并将其放在另一个div部分和droppable div中进行排序！

我的要求是我有课程按钮＆＃39;你好＆＃39; 当我放入我的droppable部分时它应该被隐藏我不想在我的droppable div中显示按钮

请任何人帮助我实现它谢谢!!!

html代码

<form method="post" action="">
        <span>Drop:</span>
            <div id="qselected">
            </div>
    </form>
    <span>Drag:</span>
        <div id="qlist">
            <div class="qitem">
                <span data-item="1" class="question">Abc</span>
                <input type="hidden" value="1" name="question[]" />
                <button class="hello">hello</button>
            </div>
            <div class="qitem">
                <span data-item="2" class="question">xyz</span>
                <input type="hidden" value="2" name="question[]" />
                <button class="hello">hello</button>
            </div>
        </div>

jquery代码

<script type="text/javascript">
        $(document).ready(function() {

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

        $(".qitem").draggable({
            containment : "#container",
            helper : 'clone',
            revert : 'invalid',
            greedy: true
        });

        $("#qselected, #qlist").droppable({
            revert:true,
            hoverClass : 'ui-state-highlight',
            greedy: true,
            accept:'.hello',
            drop : function(ev, ui) {
                $(ui.draggable).clone().appendTo(this);
                //$(ui.draggable).remove();
            },
        });
    });

    </script>

Answer 1

您可以按如下方式检查可丢弃区域中丢弃的项目的长度：

$( "#droppable" ).droppable({
  drop: function() {
    var dropbableEle = $(".dropableEle").length;
    if(dropbableEle>0){
        //you can place the code to remove the button   
    }

  }
});

Answer 2

您可以执行以下操作：

$("#qselected, #qlist").droppable({
    revert:true,
    hoverClass : 'ui-state-highlight',
    greedy: true,
    accept:'.qitem',
    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();
       }
    },
});

JSFIDDLE EXAMPLE

拖放和可排序的jquery UI

2 个答案: