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>

表单将从另一个页面调用。这是代码：

 <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，因此此代码实际上并没有执行任何操作。除此之外，当您将某些东西放到它们上时，它们没有任何脚本。由于您的示例还不完整，因此很难确定预期的结果。

我建议您像设置可拖动对象一样设置可放置对象，然后禁用它们或重置其accept选项。这样一来，他们就可以在页面加载时正确初始化它们，并且还可以执行您希望它们执行的所有操作。

jQuery不同区域可放置

1 个答案: