jQuery画像をDivにドラッグ

Question

画像を3つのスロットのいずれかにドラッグできるようにサイトを設定しようとしています。 draggableはうまく動作しますが、ドロップイベントは発生しません。ドラッグストップイベントにアラートを追加して、それが領域にドロップされたかどうかを確認しようとしましたが、常にfalseを返します。私はjavascriptをデバッグしましたが、無駄です。この設定はjQueryダイアログボックスで行われ、メイン画像のスパンは非表示になり、ドロップダウンボックスの選択に基づいて表示され、merch_slots divは動的に設定されます。どんな助けもありがとう。私はどのスロットにドラッグされた画像取得のポイントを得ることができれば

は、私は残りの世話をすることができます。

<span id="span_asst" class="merch_image_slots"> 
<img id="image_merch_1" class="merchandiser_image" alt="image" src="images/image_merch_1.jpg" /> 
<img id="image_merch_2" class="merchandiser_image" alt="image" src="images/image_merch_2.jpg" /> 
<img id="image_merch_3" class="merchandiser_image" alt="image" src="images/image_merch_3.jpg" /> 
</span> 

<div class='merch_slots'> 
<div id='selected_item1' class='selected_item'> 
<img height='250' class='droppable' src='images/merchandiser/image1.jpg' /> 
</div> 
<div id='selected_item2' class='selected_item'> 
<img height='250' class='droppable' src='images/merchandiser/image2.jpg' /> 
</div> 
<div id='selected_item3' class='selected_item'> 
<img height='250' class='droppable' src='images/merchandiser/image3.jpg' /> 
</div> 
</div> 

$(".merchandiser_image").draggable({ 
    revert: "invalid", 
    containment: '.container', 
    refreshPositions: true, 
    cursor: 'move', 
    drag: function(event, ui) { 
     $('.droppable').addClass('ui-state-highlight'); 
    }, 
    stop: function(event, ui) { 
     $('.droppable').removeClass('ui-state-highlight'); 
     if ($.ui.ddmanager.drop($(this).data("draggable"), event)) { 
      alert('was dropped'); 
     } 
     else { 
      alert('it was not dropped'); 
     } 
    } 
}); 


$(".selected_item").droppable({ 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
     var targetElem = $(this).attr("id"); 
     $(this) 
     .addClass("ui-state-highlight") 
     alert(targetElem); 
    } 
}); 

.selected_item 
{ 
    width:122px; 
    height:250px; 
    float:left; 
    background: white; 
    margin-left:2px; 
    margin-right:2px; 
    border-color: #20548E; 
    border-style: solid; 
    border-width:2px; 
    text-align:center; 
    vertical-align:middle; 
} 

.merchandiser_image 
{ 
    margin-left:2px; 
    margin-right:2px; 
    border-color: #20548E; 
    border-style: solid; 
    border-width:2px; 
    height:250px; 
} 

Answer 1

説明

うーん、私はあなたのコードが間違って何も表示されません。
私はJSFiddleでそれをテストする自由を取った。

This was the result、脇画像エラーは、それはあなたが記述している何をしないのですか？
あなたは自分のコードの貼り付けセグメントをコピーしている場合を除き、私はあなたがjQueryののcrucial partを忘れていると思う：

$(document).ready(){ 
    //Do stuff 
}); 

I は絶対確実に言うことができる何が、何も問題がないことですコード。
さて、...インデントの可能性があります。

あなたは間違って何かがあると思う場合は、おそらくあなたは、いくつかのデバッグ方法をチェックアウトする必要があります。

• のFirefox：Firebug
• クローム：デベロッパーパネル
• のInternet Explorer：開発者パネル（F12）
• オペラ： は、お使いのブラウザによっては、いくつかのオプションを持っているDragonfly

---

ソリューション

解決策は全体で、
Here's the example in JSFiddle once againです。

HTML

<span id="span_asst" class="merch_image_slots"> 
    <img id="image_merch_1" class="merchandiser_image" alt="image" src="images/image_merch_1.jpg" /> 
    <img id="image_merch_2" class="merchandiser_image" alt="image" src="images/image_merch_2.jpg" /> 
    <img id="image_merch_3" class="merchandiser_image" alt="image" src="images/image_merch_3.jpg" /> 
</span> 

Javascriptを

$(document).ready(function(){ 
    $(".merchandiser_image").draggable({ 
     revert: "invalid", 
     containment: '.container', 
     refreshPositions: true, 
     cursor: 'move', 
     drag: function(event, ui) { 
      $('.droppable').addClass('ui-state-highlight'); 
     }, 
     stop: function(event, ui) { 
      $('.droppable').removeClass('ui-state-highlight'); 
      if ($.ui.ddmanager.drop($(this).data("draggable"), event)) { 
       alert('was dropped'); 
      } 
      else { 
       alert('it was not dropped'); 
      } 
     } 
    }); 


    $(".selected_item").droppable({ 
     hoverClass: "ui-state-active", 
     drop: function(event, ui) { 
      var targetElem = $(this).attr("id"); 
      $(this) 
      .addClass("ui-state-highlight") 
      alert(targetElem); 
     } 
    }); 
}); 

CSSコードはここでうまく動作します

.selected_item 
{ 
    width:122px; 
    height:250px; 
    float:left; 
    background: white; 
    margin-left:2px; 
    margin-right:2px; 
    border-color: #20548E; 
    border-style: solid; 
    border-width:2px; 
    text-align:center; 
    vertical-align:middle; 
} 

.merchandiser_image 
{ 
    margin-left:2px; 
    margin-right:2px; 
    border-color: #20548E; 
    border-style: solid; 
    border-width:2px; 
    height:250px; 
}