質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

jquery.pep.jsでドロップされた要素の状態を変更・監視したい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 814

kihokutarou

score 22

pep公式
GitHub
基本となるdemoファイル \demo\droppable-consuming-parent.html

jqueryライブラリの上記デモファイルを応用して、以下の動きを実現したいと思っています。
①pep要素をある要素にドロップしrest状態にてドロップされた要素のバックカラーを一時的でなくずっと変更する。
②あらかじめ存在するドロップされる要素4つにpep要素がすべて入ったら(4つとも満たされたら)4つの要素を一つの要素に書き換える。
そのために①にてcssを変更し、「4つともcssが変更されたら」というプログラムを書きたい。

そこで2つ教えていただけたらと思います。
①ドロップされる側の要素の判別をどのように行えばよいか。
②4つあるドロップされるdiv要素の監視をどのように書けばよいのか。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jquery.pep droppable w/ consuming parent</title>

    <!-- Load local jQuery.  -->
    <script src="jquery.js"></script>

    <!-- Load local lib and tests. -->
    <script src="jquery.pep.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){

        $('.pep').pep({
          droppable: '.droppable',
          overlapFunction: false,
          useCSSTranslation: false,
          start: function(ev, obj){
            obj.noCenter = false;
          },
          drag: function(ev, obj){
            var vel = obj.velocity();
            var rot = (vel.x)/5;
            rotate(obj.$el, rot);
          },
          stop: function(ev, obj){
            rotate(obj.$el, 0);
          },
          rest: handleCentering,
        });


        function handleCentering(ev, obj){
          console.log(obj.activeDropRegions.length);
          if ( obj.activeDropRegions.length > 0 ) {
            centerWithin(obj);
          }
        }

        function centerWithin(obj){
          var $parent = obj.activeDropRegions[0];
          var pTop    = $parent.position().top;
          var pLeft   = $parent.position().left;
          var pHeight = $parent.outerHeight();
          var pWidth  = $parent.outerWidth();

          var oTop    = obj.$el.position().top;
          var oLeft   = obj.$el.position().left;
          var oHeight = obj.$el.outerHeight();
          var oWidth  = obj.$el.outerWidth();

          var cTop    = pTop + (pHeight/2);
          var cLeft   = pLeft + (pWidth/2);

          if ( !obj.noCenter ) {
            if ( !obj.shouldUseCSSTranslation() ) {
              var moveTop = cTop - (oHeight/2);
              var moveLeft = cLeft - (oWidth/2);
              obj.$el.animate({ top: moveTop, left: moveLeft }, 50);
            } else{
              var moveTop   = (cTop - oTop) - oHeight/2;
              var moveLeft  = (cLeft - oLeft) - oWidth/2;
              obj.moveToUsingTransforms( moveTop, moveLeft );
            }

            obj.noCenter = true;
            return;
          }

          obj.noCenter = false;
        }

        function rotate($obj, deg){
          $obj.css({
              "-webkit-transform": "rotate("+ deg +"deg)",
                 "-moz-transform": "rotate("+ deg +"deg)",
                  "-ms-transform": "rotate("+ deg +"deg)",
                   "-o-transform": "rotate("+ deg +"deg)",
                      "transform": "rotate("+ deg +"deg)"
            });
        }

      });
    </script>

    <style type="text/css">
      .pep{ width: 80px; height: 80px; background: blue; z-index: 10; }
      .droppable{   width: 100px; height: 100px;
                    position: absolute;
                    border: 5px solid #ccc; }

      .droppable.tr { top:150px; left:100px; }
      .droppable.br { top:150px; left:210px; }
      .droppable.bl { top:150px; left:320px; }
      .droppable.tl { top:150px; left:430px; }
      .pep-dpa      { border-color: blue; background: yellow }
    </style>

  </head>


  <body>
    <div class="pep"></div>
    <div class="pep"></div>
    <div class="pep"></div>
    <div class="pep"></div>
    <div class="pep"></div>
    <div class="droppable tr"></div>
    <div class="droppable br"></div>
    <div class="droppable bl"></div>
    <div class="droppable tl"></div>
  </body>


</html>

rest時の関数であるfunction handleCentering(ev, obj)に「入れ子であるdiv要素のclass名を取得しcssを変更する」という記述を施せばよいのかと思っていますが、その指定方法がわかりません。obj.activeDropRegionsがそれにあたるかと思いましたがうまく判定できませんでした。また例えばpepにおいて「$(.pep).parent.css・・・・」と記載すればよいかと思いつきましたがこれもうまくいかず。
まずは①、次いで②なのだろうとは思いますが、ご教示いただけると嬉しいです。

追記:
無知なためpepの質問として書きましたが、Jqueryの質問になりますでしょうか。activeな入れ子の状態を取得する、ということなのかもしれません。よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる