Как выполнить функцию, когда элемент перетаскивается - PullRequest
Новая
       35

Как выполнить функцию, когда элемент перетаскивается

0 голосов
/ 27 апреля 2011

У меня вопрос типа jquery / javascript.

Приведенный ниже код создаст объекты, которые можно перетаскивать.Если вы щелкнете по объекту, он отобразит идентификатор «следующего» объекта.

Я хочу вернуть это значение (идентификатора следующего объекта), когда объект будет первым »схватил "(поднял без умышленного нажатия) и затем вернул идентификатор" следующего "объекта, в котором он находится.

В идеале, если идентификатор локации, которую он захватил, равенв место, где он находится, он не должен возвращать никаких идентификаторов.

Jquery & Javascript 

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

$("li").live("click",function(e) {
    document.getElementById("result").innerHTML=($(this).next("li").attr('id'))
});

CSS: 

#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>

HTML: 

<div class="container">

<ul id="sortable">
    <li id="li1" class="ui-state-default">1</li>
    <li id="li2" class="ui-state-default">2</li>
    <li id="li3" class="ui-state-default">3</li>
    <li id="li4" class="ui-state-default">4</li>
    <li id="li5" class="ui-state-default">5</li>
    <li id="li6" class="ui-state-default">6</li>
</ul>

</div>

<br><div id="result">Result Placed Here</div>

Я даже не знаю, с чего начать, потому что я не знаю, как запустить функцию без нажатия (без захвата).

Любая помощь с благодарностью,

Тейлор

JSfiddle можно найти здесь: http://jsfiddle.net/TSM_mac/uuHsg/4/

1 Ответ

0 голосов
/ 27 апреля 2011

Используйте сортируемые события start и stop. 

$(function() {
    function startCallback(event, ui) {
        // stuff
    }

    function stopCallback(event, ui) {
        // other stuff
    }

    $("#sortable").sortable({
        start: startCallback,
        stop: stopCallback
    }).disableSelection();
});
...