解释

Question

我正在尝试设置我的网站，以便将图片拖动到三个插槽中的一个。 draggable工作正常，但drop事件没有触发。我尝试向拖拽停止事件添加警报，以确定它是否被丢弃在某个区域，但总是返回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，除了图像错误之外，它不是你所描述的吗？除非您只是复制粘贴代码段，否则我认为您忘记了crucial part JQuery：

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

我可以绝对肯定地说出来的是，代码没有任何问题。
嗯......也许是缩进。

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

Firefox：Firebug
Chrome：开发人员面板
Internet Explorer：开发人员面板（ F12 ）
Opera：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;
}

jQuery将图像拖动到Div

1 个答案:

解释

解决方案