JQuery сбрасывается с другой областью - PullRequest
Новая
       39

JQuery сбрасывается с другой областью

0 голосов
/ 04 октября 2018

выпадающие выпуски

сначала я опущу форму, в которой содержится содержимое div, и установлю счетчик для этой формы приращения 'Id', отбрасывая ее снова и снова,после этого я добавлю еще один элемент в форму, которая появится в форме.Теперь для другого элемента, отбрасывающего мое содержание, является форма.Это работает, но элемент будет отображаться в каждой форме.

Я хочу, чтобы он отображался только в одной форме, куда я хочу добавить.

Вот мой код:

<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>

Я опущу его в одном из, но появлюсь и в другом виде ... Я хочу, чтобы в одном было отброшено ... Как я могу это сделать, пожалуйстапомогите заранее спасибо

1 Ответ

0 голосов
/ 05 октября 2018

Я начал с некоторой очистки кода: 

$(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 нет ничего скриптового для них, когда вы что-то им добавляете.Поскольку ваш пример не завершен, определить, каким должен быть ожидаемый результат, действительно сложно.

Я бы посоветовал установить параметры сброса так же, как перетаскиваемые объекты, а затем отключить их или сбросить параметр accept.Это позволит им правильно инициализироваться при загрузке страницы, а также делать все, что вы от них хотите.

...