- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我试图沿着一条线拖动元素。他们应该互相插入,而不是越过或越过。
为了避免拖动时有阴影元素 float ,我拖动了一个子 div,它会影响外部元素的位置。工作正常,除非您释放鼠标触发最后一个拖动事件,clientX
等于 0
(参见 CodePen)!
var b = document.querySelector('.box');
var bi = document.querySelector('.box-inner');
var b2 = document.querySelector('.box2');
bi.addEventListener('dragstart', function() {
console.log("dragstart")
}, false);
bi.addEventListener('drag', function(event) {
const bLeft = event.clientX;
const b2Left = b2.offsetLeft;
b.style.left = bLeft + "px";
if (b2Left - 50 <= bLeft) {
b2.style.left = (bLeft + 50) + "px";
}
console.log("drag", event.clientX, event.target.offsetParent.offsetLeft, b2.offsetLeft);
}, false);
bi.addEventListener('dragend', function() {
console.log("dragend")
}, false);
.box {
width: 50px;
height: 50px;
background-color: hotpink;
position: absolute;
top: 0;
left: 0;
}
.box-inner {
width: 100%;
height: 100%;
}
.box2 {
width: 50px;
height: 50px;
background-color: rebeccapurple;
position: absolute;
left: 200px;
top: 0;
}
<div class="box">
<div class="box-inner" draggable="true"></div>
</div>
<div class="box2"></div>
这是为什么?我该怎么做才能避免重置它?
最佳答案
默认情况下,数据/元素不能放在其他元素中。要允许放置,您必须防止在拖动时对元素进行默认处理。
document.addEventListener("dragover", function(event) {
// prevent default to allow drop
event.preventDefault();
}, false);
关于javascript - 为什么 clientX 在最后一次拖动事件中重置为 0,如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36308460/
我正在努力实现双指缩放代码。 我只是检查了 WinJS 语义缩放实现并找到了有趣的代码片段。 适用于 JavaScript 1.0/js/ui.js 的 Windows 库 行号:30710、3072
问题 我需要在调用 timeupdate 后检索 clientX (水平鼠标位置)值。但是,timeupdate 事件不会返回 clientX,而且我似乎找不到解决此问题的方法。 到目前为止的代码(示
我正在创建一个绘图应用程序,但出于某种原因,控制台无法识别 clientX 和 clientY 我已尝试在 chrome 上禁用设备模式,但错误仍然存在
当指针在图片上时,我需要每 1 秒控制台记录一次 x 坐标,但我不知道如何从 js 代码更新“事件”。 function onPic(event) { let xOnPic = event.cli
如何在仅传递 X、Y 坐标的 DIV 上模拟 onclick 事件??? 如果我尝试做到这一点,显然 dispatchEvent 函数需要将在其上引发事件的对象......但那是什么意思传递事件创建坐
我正在构建的程序是一个当鼠标按下时读取鼠标 X 和鼠标 Y 位置的程序。产生错误的代码如下: function updateLocation(event) { setTimeout(funct
由于某种原因,控制台一直显示未捕获的类型错误:无法读取未定义的属性“clientX” 在 moveCircle (script.js:5) 但代码仍然可以在浏览器中运行。您能解释一下该错误是如何出现在
当我调用函数时,我从全局函数中得到:window.event.clientX 和 window.event.clientY,粘贴。 我正在尝试粘贴坐标,但它们因我正在努力解决的一些信息而偏离。 我正要
我试图更好地理解事件属性 clientX 和 clientY 的用法。 当鼠标指针移动到特定的 div 上时,我需要找到鼠标指针的顶部和左侧偏移量。 projectImage(x) 函数附加到 div
您好,我正在尝试学习如何使用 HTML5 canvas 制作绘图应用程序到目前为止我写了这段代码,问题是浏览器控制台一直告诉我无法读取未定义的属性“clientX”,我当然在使用 jquery 这是J
我写了这个简单的代码来在我用鼠标指针点击的位置打印一个小点:- $(document).ready(function(){ $('#pane').click(function(e){
我在使用 jQuery 访问事件的事件坐标时遇到问题。我的代码如下。每当我更改音量 slider 时,它都会返回 undefined 而不是光标位置。 $(document).ready(funct
我正在开发 d3 和 js 项目。 函数的开头如下所示: $(document).ready(function() { d3.select("#aid").select(".abutton")
我正在尝试获取 Chrome 中点击事件的坐标。该事件是使用 ReactComponent 的 onClick 处理程序生成的,如下所示: { console.log('e:', e.clientX
我使用 jQuery 并从 jqueryUI 中拖动。当我将 jQuery 从 1.6 更新到 1.7 时,clientX 和 pageX 属性从事件变量中消失。这是一个例子: http://jsbi
下面的代码一直有效,直到第 47 行被第 48 行替换(即计算 fillStyle)。出于某种原因,尝试使用 clientY 来计算 rgba 的蓝色部分不起作用,而计算 alpha 则不是问题。
当我意识到它在 chrome 控制台中引发了数千个错误时,我只是将这个鼠标跟踪小示例放在一起。 Uncaught TypeError: Cannot read property 'clientX' o
是否可以使用 DOM API 将 pageX, pageY 转换为 clientX, clientY? 我有一个元素,我需要从中找到 clientX 和 clientY。我可以使用 jQuery 的偏
我最近想在 chrome 27 中模拟鼠标事件来模拟点击。更重要的是,事件必须有clientx。 我做了以下编码,但 clientX 值始终为 0,请帮助我,谢谢。 var evt = documen
我创建了一个在鼠标移动时跟随鼠标 x 和 y 坐标的形状。您可以在此处查看结果:http://codepen.io/anon/pen/qNKgqo 这会很好用,形状位于鼠标光标的中心。不幸的是我有一些
我是一名优秀的程序员,十分优秀!