jquery droppable 具有不同的区域

Question

可丢弃的问题

首先，我将删除一个包含 div 的表单，并设置计数器，通过一次又一次地删除它来增加表单“Id”，之后我将在表单上删除另一个元素，该元素将出现在 form 中。现在对于其他元素放弃我的遏制是形式。它可以工作，但元素会出现在每个表单中。

我希望它只以我想要删除的一种形式出现。

这是我的代码：

<div class="row">
   <div class="col l6">
      <ul class="form" data-page="form">
          <li>
             <p>form</p>
          </li>
      </ul>
      <ul class="dragme" data-page="question">
         <li>
            <p>question</p>
         </li>
      </ul>
      <ul class="dragme" data-page="checkbox">
         <li>
            <p>checkbox</p>
         </li>
      </ul>
  </div>
  <div class="col l6">
      <div class="form-container">

           //form droppable area
      </div>
  </div>
</div>
<script>
 $(document).ready(function(){

    var counter = 0;

    $('.form').draggable({
       conectToSortable: 'form-container',
       containment: 'form-container',
       helper: 'clone',
       revert: 'invalid',
    start:function(){
       $('.form-container').droppable();
       $('.cont').sortable();
    },
    stop: function(){
      var page = $(this).attr('data-page');
    $.ajax({
      url:'http://form.html';
      success:function(data){
      counter = counter + 1;
      data = data.replace('abc',counter);
      $('.form-container').append(data);
      }
    });
   },
 });
});

$('.dragme').draggable({
   conectToSortable: 'form-element',
   containment: 'form-child',
   helper: 'clone',
   revert: 'invalid',
 start:function(){
    $('.form-child').droppable();
    $('.form-child').sortable();
  }, 
 stop: function(){
    var page = $(this).attr('data-page');
    $.ajax({
    url:'http://other-pages';
       success:function(data){
        $().append(data);
        $('.form-container').append(data);
       } 
     })
    },
   });
  });

</script>

form 将从另一个页面调用。代码如下：

 <div class="col s12 m12 l12">
    <form>
       <div id="abc" class="form-element form-child">

            //droppable area for other element

        </div>
    <form>
 </div>

I will drop it in one from but appear also in other form...I want it in one thats will dropped...how can I do it please help thanks in advance

Answer 1

我从一些代码清理开始：

$(function() {

  var counter = 0;

  $('.form').draggable({
    conectToSortable: 'form-container',
    containment: 'form-container',
    helper: 'clone',
    revert: 'invalid',
    start: function(e, ui) {
      $('.form-container').droppable();
      $('.cont').sortable();
    },
    stop: function() {
      var page = $(this).attr('data-page');
      $.ajax({
        url: 'http://form.html',
        success: function(data) {
          counter++;
          $('.form-container').append(data);
        }
      });
    }
  });

  $('.dragme').draggable({
    conectToSortable: 'form-element',
    containment: 'form-child',
    helper: 'clone',
    revert: 'invalid',
    start: function() {
      $('.form-child').droppable();
      $('.form-child').sortable();
    },
    stop: function() {
      var page = $(this).attr('data-page');
      $.ajax({
        url: 'http://other-pages',
        success: function(data) {
          counter++;
          $('.form-container').append(data);
        }
      });
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
  <div class="col l6">
    <ul class="form" data-page="form">
      <li>
        <p>form</p>
      </li>
    </ul>
    <ul class="dragme" data-page="question">
      <li>
        <p>question</p>
      </li>
    </ul>
    <ul class="dragme" data-page="checkbox">
      <li>
        <p>checkbox</p>
      </li>
    </ul>
  </div>
  <div class="col l6">
    <div class="form-container">
      //form droppable area
    </div>
  </div>
</div>

这段代码实际上并没有做任何事情，因为它都是 AJAX。除此之外，当您将某些东西丢给它们时，您的 droppables 没有任何脚本。由于您的示例不完整，因此很难确定预期的结果应该是什么。

我建议您将 droppables 设置为像您的可拖动对象一样设置，然后禁用它们或重置它们的 accept 选项。这将允许它们在页面加载时正确初始化，并执行您希望它们执行的任何操作。