Draggable не работает после изменения положения перетаскиваемого объекта - PullRequest
Новая
       1

Draggable не работает после изменения положения перетаскиваемого объекта

0 голосов
/ 20 марта 2012

Есть 2 тега, позиции которых я обмениваю, если верх перетаскивается и покрывает более половины дна. Первоначально оба тезиса являются перетаскиваемыми. Однако, чтобы обменять позиции, я обмениваю их innerHTML, и как только это будет сделано, они оба больше не будут перетаскиваться. Я довольно новичок в jQuery, и любые предложения будут оценены.

Вот, код

Вот часть HTML 

<div id="wrapper">
  <table id="panelTable" cellpadding="0" cellspacing="0">
      <tr id="panel_top_tr">
         <td id="panel_top_td" class="draggable">
            <div id="panel_top" class="panel">Panel Top</div>
         </td>
      </tr>
      <tr id="sep_tr">
         <td class="separator_horizontal"></td>
      </tr>
      <tr id="panel_bottom_tr">
         <td id="panel_bottom_td" class="draggable">
            <div id="panel_bottom" class="panel">Panel Bottom</div>
         </td>
      </tr>
  </table>
</div>

Theres куча html выше и ниже этого фрагмента, но вы понимаете суть ..

Вот код jQuery 

$(function () {

        $_dropEnd = null;

        $(".draggable").draggable({
            axis: 'y',
            cursor: 'move',
            cancel: 'a',
            revert: 'invalid',
            snap: 'true',

            //store initial innerHTML values before dragging starts
            start: function () {
                table = document.getElementById("panelTable");
                row1 = document.getElementById("panel_top_tr");
                row2 = document.getElementById("sep_tr");
                row3 = document.getElementById("panel_bottom_tr");
                r1html = row1.innerHTML;
                r3html = row3.innerHTML;
            },

            //check position and exchange accordingly
            drag: function (event) {
                var headlineTop = $('#panel_top_td').position().top;
                var headlineHeight = $('#panel_top_td').height();
                var headlineBottom = headlineTop + headlineHeight;
                var headlineCenter = headlineTop + (headlineHeight / 2);

                var storyTop = $('#panel_bottom_td').position().top;
                var storyHeight = $('#panel_bottom_td').height();
                var storyBottom = storyTop + storyHeight;
                var storyCenter = storyTop + (storyHeight / 2);

                if (headlineBottom >= storyCenter) {
                    //Exchange                                               
                    row3.innerHTML = r1html;
                    row1.innerHTML = r3html;
                    isTop = false;
                    $('#panel_bottom_td').draggable('enable');
                    $('#panel_top_td').draggable('enable');
                }
            },
            stop: function (event, ui) {
                $(this).appendTo($_dropEnd);
                $_dropEnd = null;
            }
        });
    });

1 Ответ

0 голосов
/ 20 марта 2012

Это много кода для очень простой задачи. Я предлагаю вам взглянуть на jQuery UI Sortable , делает именно то, что вы хотите, кросс-браузер, легко настраивается.

...