0

ロゴのグリッドがあります。ロゴをダブルクリックして削除するか、指定した正方形にドラッグして、そのロゴの詳細を表示することができます。

問題のツールは次のとおりです。

ロゴをドラッグまたは非表示

助けていただければ、2つの質問があります。

  1. ロゴをドロップ可能な正方形にドラッグするとき、その特定のロゴに関する情報を収集し、ドロップ可能な領域の横にある情報を表示することをどのように推奨しますか？

  2. ドロップ可能な領域にドロップされたロゴをダブルクリックすると、そのロゴが消えます。それが消えた後、どうすればそのドロップ可能な領域を再定義して他のロゴに使用できますか？

私が台無しにしたかもしれない他の情報を見たら、私に実行のより良い方法を知らせてください。どうもありがとう！

jQueryは次のとおりです。

<script>

$(document).ready(function() {

$('.imageShowing').dblclick (function() {

  $(this).stop().animate({
    zIndex: '1',
    height: '100',
    width: '140',
  }, 100, function() {

        $(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo })

    $(this).stop().animate({
    zIndex: '1',
    top: '500',
    opacity: '0'
  }, 700, function() {   
  $(this).hide("fast");  
    // Animation complete.
  });
  });
});

}); //end document.ready


$(init);

function init(){
    $('.imageShowing').draggable( { 
    containment: '#wrapper',
    cursor: 'move',
    snap: '#droppable',
    stop: cardDropped,
    start: objectGrabbed,
    revert: true,
    }); 

    $('#droppable').droppable( {
        drop: handleCardDrop,
        hoverClass: 'droppableHover',
        accept: '.imageShowing'
    });

}

function objectGrabbed(event, ui) {
    $(this).stop().animate({
    zIndex: '100',
  },0,function() { 
    $(this).stop().animate({
    opacity: '.5'
  }, 500);

  });
}

function cardDropped() {
    $(this).stop().animate({
    opacity: '1',
    zIndex: '12'
  }, 500);
 }


function handleCardDrop( event, ui ) {
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    }

</script>

そして、必要に応じてCSS：

#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;}
#grid {width: 935px; height: 536px; margin: auto; background: url(images/gridLine.png) repeat-y top; padding:0; position: relative; z-index: 5;} /* height equals 134 X 4. Each horizontal grid is 134 in height and 950px in width */

#logoWrapper {position: absolute; top: 2px; left: 36px }

#logoWrapper ul {text-decoration: none; list-style-type: none; margin:0; padding:0; }
#logoWrapper ul li {list-style-type: none; float: left; position: relative; padding: 0 6px 6px 0; height: 128px; width: 180px; margin: 0;}
#logoWrapper ul li img { margin:0; position: absolute; z-index: 6;}

#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}
#droppableWrapper {border: dashed 5px #666; width: 180px; margin:0 auto; }
#droppable {height: 128px; width: 180px; background: #CCC;};
.droppableHover {background: #333; }
4

1 に答える 1

1

あなたの最初の質問のために..私にとってそれは依存するでしょう：

a）表示する情報の量

b）その情報はどこに保存されていますか（html？ロゴのデータ属性？ajax？）

私にとって、これは何よりもデザインの質問のように感じますが、データがどこにあり、どこに行くのかがわかれば、データを取得してテンプレートに入れ、ページに表示するための関数を作成するだけです。次に、ドロップコールバックにフックします。

2番目の質問については...ドロップ可能を再度「有効」にする必要があるようです。$('#droppable').droppable('enable')dblclickアニメーションが完了した後のようなものかもしれませんが、その詳細についてはjqueryのドキュメントを参照してください。

于 2012-04-14T02:55:40.380 に答える