的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; 
}