jQuery将图像拖动到Div

我正在尝试设置我的站点，以允许将图像拖到三个插槽之一。Dragable可以正常工作，但是drop事件没有触发。我尝试向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;
}

$（“.merchandiser_image”）.可拖动({
回复：“无效”，
安全壳：'.container'，
他说:对,，
光标：“移动”，
拖动：函数（事件、ui）{
$（'.droppable'）.addClass（'ui-state-highlight'）；
},
停止：功能（事件、用户界面）{
$（'.droppable'）.removeClass（'ui-state-highlight'）；
if（$.ui.ddmanager.drop（$（this.data（“可拖动”），事件））{
警报（‘已删除’）；
}
否则{
警报（‘未删除’）；
}
}
});
$（“.selected_item”）。可拖放({
hoverClass：“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
var targetElem=$（this.attr（“id”）；
$（本）
.addClass（“ui状态突出显示”）
警报（targetElem）；
}
});
.所选项目
{
宽度：122px；
高度：250px；
浮动：左；
背景：白色；
左边距：2倍；
右边距：2px；
边框颜色：#20548E；
边框样式：实心；
边框宽度：2倍；
文本对齐：居中；
垂直对齐：中间对齐；
}
.跟单员形象
{
左边距：2倍；
右边距：2px；
边框颜色：#20548E；
边框样式：实心；
边框宽度：2倍；
高度：250px；
}

说明 嗯，我看不出你的代码有什么问题。
我冒昧地在JSFIDLE上测试了它

，撇开图像错误不谈，它不正是你所描述的吗？
除非您只是复制粘贴代码的片段，否则我认为您忘记了JQuery的一个特性：

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

我可以绝对肯定地说，代码没有任何问题。
好。。。也许是压痕

如果您认为有问题，也许您应该检查一些调试方法。 根据您的浏览器，您有一些选项：

• 火狐：
• Chrome：显影剂面板
• Internet Explorer：开发人员面板（F12）
• 歌剧：

---

解决方案 整个解决方案，

HTML

CSS

解释 嗯，我看不出你的代码有什么问题。
我冒昧地在JSFIDLE上测试了它

，撇开图像错误不谈，它不正是你所描述的吗？
除非您只是复制粘贴代码的片段，否则我认为您忘记了JQuery的一个特性：

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

我可以绝对肯定地说，代码没有任何问题。
好。。。也许是压痕

如果您认为有问题，也许您应该检查一些调试方法。 根据您的浏览器，您有一些选项：

• 火狐：
• Chrome：显影剂面板
• Internet Explorer：开发人员面板（F12）
• 歌剧：

---

解决方案 整个解决方案，

HTML

CSS

---

你的代码在这里运行得很好你的代码在这里运行得很好谢谢你的帮助，我发现我做错了什么。我把可放下的声明放错地方了。由于Dropable所附加到的项是动态创建的，因此在声明Dropable时，该项不存在。我把它移到合适的地方，它工作正常。谢谢你的帮助，我发现我做错了什么。我把可放下的声明放错地方了。由于Dropable所附加到的项是动态创建的，因此在声明Dropable时，该项不存在。我把它移到合适的地方，它工作正常。

$(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);
        }
    });
});

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