jQuery « sortable, перетащить элемент из одного списка в другой

Нужно сделать, чтобы можно было перетаскивать элемент из одного списка в другой. Не могу понять что не так делаю.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

$(function() {
    $( ".drag-zone-apps ul" ).sortable({
      connectWith: "ul",
      placeholder: 'ui-state-highlight-zone',
      dropOnEmpty: true,
      opacity: 0.6,
      cursor: 'pointer',
      revert: true,
      start: function(event, ui) {
        $('#trash-for-app').css('display', 'block');

      },
      stop: function(event, ui) {
        $('#trash-for-app').css('display', 'none');
      },
      update: function() {
      alert(1);
      }
     
    });


  $( ".drag-zone-apps" ).disableSelection();
  });
 


/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div class="drag-zone-apps" >
    <ul>
              <li><img style="margin: 5px;" width="64" src="url"></li>
              <li><img style="margin: 5px;" width="64" src="url"></li>
    </ul>
</div>
<div class="drag-zone-apps">
  <ul>
    <li>
    <img width="64" src="url">
    </li>
  </ul>
</div>
 


как в start написать, чтобы драг-н-дроп действовал только для .drag-zone-apps ?
0
javascript jquery sortable

1 ответов

Вам нужно использовать свойство containment, значение этого свойства селектор элемента внутри которого производится перетаскивания. Соответственно вам нужно обернуть все .drag-zone-apps в один элемент и указать его id в свойстве containment.


<div id="drag-zone-apps">
  <div class="drag-zone-apps" >
    <ul>
       <li><img style="margin: 5px;" width="64" src="url"></li>
        <li><img style="margin: 5px;" width="64" src="url"></li>
    </ul>
  </div>
  <div class="drag-zone-apps">
    <ul>
      <li><img width="64" src="url"></li>
    </ul>
  </div>
</div>
 


$( ".drag-zone-apps ul" ).sortable({
      connectWith: "ul",
      containment: '#drag-zone-apps'
      placeholder: 'ui-state-highlight-zone',
      dropOnEmpty: true,
      opacity: 0.6,
      cursor: 'pointer',
      revert: true,
      start: function(event, ui) {
        $('#trash-for-app').css('display', 'block');

      },
      stop: function(event, ui) {
        $('#trash-for-app').css('display', 'none');
      },
      update: function() {
      alert(1);
      }
     
    });
 
1