的jQuery拖動圖片到DIV

Question

我試圖建立我的網站，讓圖像被拖動到​​三個插槽中的一個。拖動工作得很好，但拖放事件不會觸發。我嘗試向drag-stop事件添加警報，以確定它是否被放置在某個區域上，但始終返回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 
}); 

我可以絕對肯定地說，是，有沒有錯碼。
那麼......也許是縮進。

如果您覺得有什麼不對勁，也許你應該看看一些調試方法。 根據您的瀏覽器，你有一些選擇：

• 火狐：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; 
}