Question

我正在使用asp.net创建拖放Web应用程序。

这是我的示例布局：

+----------------------------------------------------+
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                   STAGE DROP AREA                  |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
+----------------------------------------------------+

+----------------------------------------------------+
|  +------+  +------+  +------+  +------+  +------+  |
|< |IMG A |  |IMG B |  |IMG C |  |IMG D |  |IMG E | >|
|  +------+  +------+  +------+  +------+  +------+  |
+----------------------------------------------------+

第二个面板（IMG A..E）中的所有图像都可以在舞台上拖动。我现在的问题是每次我拖动它首先在舞台左上角的图像。

这是我的拖放代码：

$(document).ready(function () {
  $(".Images").draggable({
    helper: 'clone',
    scroll: false
});

$("#stage").droppable({
    accept: ".Images",
    drop: function (event, ui) {
        if ($(ui.draggable).hasClass('copied')) return
        var droppedItem = $(ui.draggable).clone().addClass('copied');
        droppedItem.draggable({
            containment: "#stage"
        });
        $(this).append(droppedItem);
    }
});

});

这是我的舞台css：

.stageCSS{
 position:absolute;
 width:640px;
 height:376px;
 top: 124px;
 left: 84px;
}

这是我的代码的来源：http://jsfiddle.net/IrvinDominin/ufHMm/

Answer 1

如果我理解正确，您可以将框内的项目放到光标的确切位置。

为此，请为项目添加绝对定位，相对于容器定位，计算坐标，而不是设置项目的顶部和左侧css属性。

Jquery的：

 ...
    $(this).append(droppedItem);
    var posX = ui.offset.left - $(this).offset().left;
    var posY = ui.offset.top - $(this).offset().top;
    droppedItem.css("left", posX);
    droppedItem.css("top",posY);
    ...

的CSS：

.box {
    width:500px;
    height:500px;
    background: orange;
    position: relative;    
}
.copied
{
    position: absolute;
}

工作演示：http://jsfiddle.net/er144/3Hay4/

获取拖放jquery的xy位置

1 个答案: