JQuery UI перетаскивается с живым - PullRequest
Новая
       25

JQuery UI перетаскивается с живым

3 голосов
/ 21 декабря 2010

это перетаскиваемый сортируемый пример на веб-сайте jqueryui, мне нужно использовать live () с этим (я думаю), потому что элементы создаются с помощью ajax, кто-нибудь знает, как применить событие live к следующему?

<script>
    $(function() {
        $( "#sortable" ).sortable({
            revert: true
        });
        $( "#draggable" ).draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid"
        });
        $( "ul, li" ).disableSelection();
    });
    </script>

Ответы [ 3 ]

2 голосов
/ 21 декабря 2010

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

Примерно так: 

// Call to add a new element
$.ajax({
  url: 'addElem',
  success: function(data) {
    $( "#newDraggableObject" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
  }
});
2 голосов
/ 12 апреля 2011

У меня была точно такая же проблема, и я думаю, что гораздо лучше решить эту проблему с помощью метода надстройки JQuery: 

//Add draggable feature:
//Define a setup method for the draggable config so we can reuse it for dynamic elements
$(function() {
    jQuery.fn.draggableSetup = function draggableSetup() {
        this.draggable(
        {
            // enter your custom draggable code here...
        });
        return this;
    }
});

//Apply the draggable config your dynamic elements after adding them
$("#dynamic_element_id").draggableSetup();

Спасибо за этот пост за ответ.

Это дает вам повторно используемое решение, и вам не нужно повторять свою реализацию для каждого ajax способ.

2 голосов
/ 21 декабря 2010

У вас нет для использования live с этим (и я не думаю, что вы можете), просто подключите их, как только вы добавите их, в обработчик success. Например, если используется load: 

$("#target").load("your url", function() {
  // Replace the selectors below to match what you load
  $( "#target *[data-name=sortable]" ).sortable({
      revert: true
  });
  $( "#target *[data-name=draggable]" ).draggable({
      connectToSortable: "#target *[data-name=sortable]",
      helper: "clone",
      revert: "invalid"
  });
  $(this).find( "ul, li" ).disableSelection();
});

Живой пример

При этом используется этот измененный HTML-код с демонстрационной страницы пользовательского интерфейса jQuery (вместо этого id вместо значений вместо data-name, чтобы они не были уникальными): 

<ul>
  <li data-name='draggable' class="ui-state-highlight">Drag me down</li>
</ul>

<ul data-name="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
...