javascript - 根据 dragend 鼠标坐标追加 div

标签 javascript jquery html jquery-ui

我想根据 dragend 事件坐标追加 div。这是我尝试过的:

 $(document).ready(function () {
            var mouseX;
            var mouseY;
            $(document).mousemove(function (e) {
                mouseX = e.pageX;
                mouseY = e.pageY;
            });
            var i =1;
            $(".ic_table").on("dragend", function (e, ui)
            {
                console.log(mouseX + " " + mouseY);
                var editName = "Edit Name";
                $('#datamodelArea').append('<div id="divDT' + i++ + '" class="dataModelTable ui-draggable ui-draggable-handle style="left:' + mouseX + 'px' + '; top:' + mouseY + 'px' + ';"><div class="dataTableName">' + editName + '</div><div class="widget"><div class="widget-head"> <a href="#" id="toggle1" class="fa fa-chevron-up fa-1x attributes"><i></i></a> Attributes <div class="widget-body attributesBody" id="widget-body1"></div></div></div><div class="widget-body attributesBody" id="widget-body1"><ul></ul></div></div>');
                $('.form-control').val('');
            });
        });

HTML:

<body>
        <div id="datamodelArea"></div>
        <button class="ic_table" draggable="true">Submit</button>
</body>

它仅附加到 top:0pxleft:0px,即使 dragend 上的鼠标坐标不同

最佳答案

将您的位置属性明确设置为容器的相对位置和放置的位置的绝对位置。

关于javascript - 根据 dragend 鼠标坐标追加 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32515911/

相关文章:

javascript - 未定义不是对象(评估 '_this.props.navigation' )

javascript - 隐藏/显示在 IE 8 中不起作用

javascript - 如何从第二个下拉值中从数据库中获取数据

html - Css 显示表不尊重以百分比表示的大小

javascript - JavaScript 中的哈希数组

javascript - 在移动设备上停止 <video> 打开 native 播放器

javascript - 使用多个 elseif 运行 JavaScript 时出现问题

jquery - 获取 math.max 的变量名

带有文件上传的html表单

javascript - promise 回调是否发送到事件队列?