JQuery UI Droppable - Как на самом деле изменить HTML? - PullRequest
Новая
       1

JQuery UI Droppable - Как на самом деле изменить HTML?

4 голосов
/ 30 марта 2012

Используя Droppable пользовательского интерфейса jQuery, я сделал вещь типа полки, куда можно перемещать содержащиеся на ней предметы. Вот код: http://jsfiddle.net/JoeyMorani/7LWj4/

Можно ли на самом деле изменить HTML полки, поэтому при перемещении элементов '.boxArt' они также перемещаются в HTML. На данный момент кажется, что он только меняет положение div и фактически не перемещает его.

Я хочу сделать это, чтобы я мог определить, где находятся div. (Каков их родительский div)

Спасибо за помощь! :)

1 Ответ

4 голосов
/ 31 марта 2012

Я сделал некоторые изменения в HTML и CSS из вашей демонстрации, но у меня что-то работает. HTML-код проще и не повлиял на результат, хотя, если вам нужен предыдущий макет, мой ответ может быть не совсем правильным.

Полный код приведен ниже, а также в демоверсии jsFddle . Код на самом деле становится намного проще после отсоединения .boxArt и перемещения его в DOM, поскольку анимации просто нужно изменить top и left обратно на 0. Единственное сложное part вычислял правильную позицию, чтобы установить .boxArt перед анимацией. Это связано с тем, что перетаскиваемое существо относительно располагается относительно элемента, из которого оно было перетащено. Как только он перемещается в DOM, эта позиция теперь совершенно неверна. Таким образом, код работает и устанавливает перетаскиваемое относительное положение сначала для нового родителя (после перемещения его в DOM), а затем анимирует обратно к top:0,left:0.

Это работает для меня в Chrome, но я не тестировал ни в одном другом браузере. console.log ушел, чтобы показать, что происходит. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <style type="text/css">
      .shelfRow {
        width:1865px;
        height:280px;
      }
      #shelves {
        position:relative;
        width:950px;
        height:566px;
        background:#CCC;
        border:1px solid #333;
        overflow-y:hidden;
        overflow-x:auto;
      }
      .drop {
        width:155px;
        height:200px;
        padding:2px;
        margin-top:30px;
        margin-left:25px;
        float:left;
        position:relative;
      }
      .dropHover {
        padding:0px;
        border:2px solid #0C5F8B;
        -webkit-box-shadow: 0 0 3px 1px #0C5F8B;
        box-shadow: 0 0 3px 1px #0C5F8B;
        -moz-box-shadow: 0 0 20px #0C5F8B;
      }
      .boxArt {
        width:155px;
        height:200px;
        -webkit-box-shadow: 0 0 8px 1px #1F1F1F;
        box-shadow: 0 0 8px 1px #1F1F1F;
        -moz-box-shadow: 0 0 20px #1F1F1F;
        color:#000;
        background:#FFF;
      }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(function() {
          var shelfOffset = $('#shelves').offset();
          var dropMarginTop = parseInt($('.drop').css('marginTop'));
          var dropMarginLeft = parseInt($('.drop').css('marginLeft'));

          $('.drop').droppable({
              accept: function(el) {
                return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt');
              },
              tolerance: 'intersect',
              hoverClass: 'dropHover',
              drop: function(event, ui) {
                ui.draggable.detach().appendTo($(this));

                var originalOffset = ui.draggable.data('originalOffset');
                console.log('originalOffset', originalOffset.top, originalOffset.left);

                var boxArt = $(this).children('div');
                var boxPosition = boxArt.position();
                console.log('boxArt position', boxPosition.top, boxPosition.left);

                var container = $(this);
                var containerPosition = container.position();
                console.log(container, containerPosition.top, containerPosition.left);

                var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop;
                var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft;

                console.log('new offset', newTop, newLeft);
                boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0});
              }
          });

          $('.boxArt').draggable({
            start: function(event, ui) {
              $(this).data('originalOffset', ui.offset);
            },
            revert: 'invalid'
          });
      });
    </script>
  </head>
  <body>
    <div id="shelves">
      <div class="shelfRow">
        <div class="drop"></div>
        <div class="drop"><div class="boxArt" id="boxArt2">2</div></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div id="drop15"></div>
      </div>
      <div class="shelfRow">
        <div class="drop"><div class="boxArt" id="boxArt1">1</div></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
      </div>
    </div>
  </body>
</html>
...