4

jQuery UI の Droppable を使用して、そこに含まれるアイテムを移動できるシェルフ タイプのものを作成しました。コードは次のとおりです。http://jsfiddle.net/JoeyMorani/7LWj4/

シェルフの HTML を実際に変更することは可能ですか?「.boxArt」の div を移動すると、HTML でも移動されます。現時点では、divの位置を変更するだけで、実際には移動していないようです。

divがどこにあるかを検出できるように、これを行いたいです。（親divとは）

助けてくれてありがとう！:)

4

1 に答える 1

4

デモからHTMLとCSSにいくつか変更を加えましたが、何か機能しています。HTMLはより単純で、結果に影響を与えませんが、前のレイアウトが必要な場合、私の答えは完全に適切ではない可能性があります。

完全なコードは、 jsFddleデモと同様に以下に複製されています。アニメーションは上部を変更して左を0に戻すだけなので、コードを切り離して.boxArtDOM内で移動すると、コードは実際にははるかに単純になります。唯一の難しい部分は、アニメーション化する前にに設定する正しい位置を計算することでした。これは、ドラッグ可能な要素がドラッグ元の要素に対して比較的配置されているためです。DOM内で移動するとすぐに、この位置は完全に正しくなくなります。そのため、コードは機能し、ドラッグ可能な相対位置を最初に（DOMで移動した後）新しい親に設定してから、アニメーションでに戻します。.boxArttop: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>
于 2012-03-31T14:12:06.083 に答える