个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有以下脚本，当拖动灰色处理程序(左上角)div 重新调整大小时，但在释放鼠标时 div 被放置在错误的位置(左边距)。
我需要修复它，就像右下角处理程序一样。
可能是什么问题？它似乎与 event.clientX 设置为 0 有关。
注意:单击 div 激活处理程序。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#target {
background-color: lightgreen;
}
.selected {
border: 1px dashed red;
}
.handler {
position: absolute;
width: 10px;
height: 10px;
background-color: gray;
}
</style>
<script>
window.App = {
config: {
elm: 'target',
elmInnerContent: 'inner-content',
x: null,
y: null,
w: null,
h: null,
handlerSize: 10
},
start: function () {
this.addEventListeners();
},
addEventListeners: function () {
var elm = document.getElementById(this.config.elm);
elm.addEventListener('click', function () {
if (!elm.classList.contains('selected')) {
elm.classList.add('selected');
this.getDimensions();
this.createHandlers();
this.setPositionHandlers();
this.addEventListenersHandlers();
} else {
elm.classList.remove('selected');
this.removeHandlers();
}
}.bind(this));
},
removeHandlers: function () {
var elm = document.getElementById('handler-wrapper');
elm.parentElement.removeChild(elm);
},
getDimensions: function () {
var elm = document.getElementById(this.config.elm);
this.config.x = elm.offsetLeft;
this.config.y = elm.offsetTop;
this.config.w = elm.clientWidth;
this.config.h = elm.clientHeight;
},
createHandlers: function () {
var wrpHandlers = document.createElement('div'),
htmlHandlers = '<div id="tl" class="tl handler" draggable="true"> </div>';
htmlHandlers += '<div id="tr" class="tr handler" draggable="true"> </div>';
htmlHandlers += '<div id="bl" class="bl handler" draggable="true"> </div>';
htmlHandlers += '<div id="br" class="br handler" draggable="true"> </div>';
wrpHandlers.id = "handler-wrapper";
wrpHandlers.innerHTML = htmlHandlers;
var elm = document.getElementById(this.config.elm);
elm.appendChild(wrpHandlers);
},
setPositionHandlers: function () {
this.getDimensions();
var elmTl = document.getElementById('tl'),
elmTr = document.getElementById('tr'),
elmBl = document.getElementById('bl'),
elmBr = document.getElementById('br');
elmTl.style.top = this.config.handlerSize * -1 + 'px';
elmTl.style.left = this.config.handlerSize * -1 + 'px';
elmTr.style.top = this.config.handlerSize * -1 + 'px';
elmTr.style.left = this.config.w + 'px';
elmBl.style.top = this.config.h + 'px';
elmBl.style.left = this.config.handlerSize * -1 + 'px';
elmBr.style.top = this.config.h + 'px';
elmBr.style.left = this.config.w + 'px';
},
addEventListenersHandlers: function () {
var elmTl = document.getElementById('tl'),
elmTr = document.getElementById('tr'),
elmBl = document.getElementById('bl'),
elmBr = document.getElementById('br');
elmTl.addEventListener('drag', function (event) {
this.resize('tl', event);
}.bind(this));
elmTr.addEventListener('drag', function (event) {
this.resize('tr', event);
}.bind(this));
elmBl.addEventListener('drag', function (event) {
this.resize('bl', event);
}.bind(this));
elmBr.addEventListener('drag', function (event) {
this.resize('br', event);
}.bind(this));
},
resize: function (handler, event) {
var elm = document.getElementById(this.config.elm);
switch (handler) {
case 'tl':
var marginR = elm.offsetLeft + elm.clientWidth,
newW = marginR - event.clientX,
xPos = event.clientX;
elm.style.left = xPos + 'px';
elm.style.width = newW + 'px';
this.setPositionHandlers();
break;
case 'tr':
break;
case 'bl':
break;
case 'br':
var newW = event.clientX - this.config.x,
newH = event.clientY - this.config.y;
elm.style.width = newW + 'px';
elm.style.height = newH + 'px';
this.setPositionHandlers();
break;
}
},
};
</script>
<title></title>
</head>
<body onload="window.App.start();">
<div id="target" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px;">
<div id="inner-content">
Some text here
</div>
</div>
</body>
</html>
最佳答案
在resize函数中，case 'tl':您必须对顶部和高度执行相同的操作，与对左侧和宽度执行的操作相同。
marginT = elm.offsetTop + elm.clientHeight,
newH = marginT - event.clientY,
yPos = event.clientY;
和
elm.style.top = yPos + 'px';
elm.style.height = newH + 'px';
编辑:抱歉，我想第一次读错了一些东西。仅供引用:您的代码在 Safari 中运行良好，但在 Chrome 中，我看到了您的问题。
Edit2:我不知道是什么原因造成的。但如果你只检查 xPos >= 0，你就可以解决这个问题。我知道这是一个丑陋的黑客，但这是我拥有的最好的黑客。 Fiddle已更新。
关于javascript - 拖动后保存 div 的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27151643/
25
4
0
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。 下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
我正在尝试保存模型的实例，但我得到了 Invalid EmbeddedDocumentField item (1) 其中 1 是项目的 ID(我认为)。 模型定义为 class Graph(Docum
我有一个非常奇怪的问题......在我的 iPhone 应用程序中，用户可以打开相机胶卷中的图像，在我的示例中 1920 x 1080 像素 (72 dpi) 的壁纸。 现在，想要将图像的宽度调整为例
目前，我正在使用具有排序/过滤功能的数据表成功地从我的数据库中显示图像元数据。在我的数据表下方，我使用第三方图像覆盖流( http://www.jacksasylum.eu/ContentFlow/
我的脚本有问题。我想按此顺序执行以下步骤: 1. 保存输入字段中的文本。 2. 删除输入字段中的所有文本。 3. 在输入字段中重新加载之前删除的相同文本。 我的脚本的问题是 ug()- 函数在我的文本
任何人都可以帮助我如何保存多对多关系吗？我有任务，用户可以有很多任务，任务可以有很多用户(多对多)，我想要实现的是，在更新表单中，管理员可以将多个用户分配给特定任务。这是通过 html 多选输入来完成
我在 Tensorflow 中训练了一个具有批归一化的模型。我想保存模型并恢复它以供进一步使用。批量归一化是通过 完成的 def batch_norm(input, phase): retur
我遇到了 grails 的问题。我有一个看起来像这样的域: class Book { static belongsTo = Author String toString() { tit
所以我正在开发一个应用程序，一旦用户连接(通过 soundcloud)，就会出现以下对象: {userid: userid, username: username, genre: genre, fol
我正在开发一个具有多选项卡布局的 Angular 7 应用程序。每个选项卡都包含一个组件，该组件可以引用其他嵌套组件。 当用户选择一个新的/另一个选项卡时，当前选项卡上显示的组件将被销毁(我不仅仅是隐
我尝试使用 JEditorPane 进行一些简单的文本格式化，但随着知识的增长，我发现 JTextPane 更容易实现并且更强大。 我的问题是如何将 JTextPane 中的格式化文本保存到文件？它应
使用 Docker 相当新。 我为 Oracle 11g Full 提取了一个图像。创建了一个数据库并将应用程序安装到容器中。 正确配置后，我提交了生成 15GB 镜像的容器。 测试了该图像的新容器，
我是使用 Xcode 和 swift 的新手，仍在学习中。我在将核心数据从实体传递到文本字段/标签时遇到问题，然后用户可以选择编辑和保存记录。我的目标是，当用户从 friendslistViewCon
我正在用 Java 编写 Android 游戏，我需要一种可靠的方法来快速保存和加载应用程序状态。这个问题似乎适用于大多数 OO 语言。 了解我需要保存的内容:我正在使用策略模式来控制我的游戏实体。我
我想知道使用 fstream 加载/保存某种结构类型的数组是否是个好主意。注意，我说的是加载/保存到二进制文件。我应该加载/保存独立变量，例如 int、float、boolean 而不是结构吗？我这么
我希望能够将 QNetworkReply 保存到 QString/QByteArray。在我看到的示例中，它们总是将流保存到另一个文件。 目前我的代码看起来像这样，我从主机那里得到一个字符串，我想做的
我正在创建一个绘图应用程序。我有一个带有 Canvas 的自定义 View ，它根据用户输入绘制线条: class Line { float startX, startY, stopX, stop
我有 3 个 Activity 第一个 Activity 调用第二个 Activity ，第二个 Activity 调用第三个 Activity 。 第二个 Activity 使用第一个 Activi
我想知道如何在 Xcode 中保存 cookie。我想使用从一个网页获取的 cookie 并使用它访问另一个网页。我使用下面的代码登录该网站，我想保存从该连接获得的 cookie，以便在我建立另一个连
我有一个 SQLite 数据库存储我的所有日历事件，建模如下: TimerEvent *Attributes -date -dateForMark -reminder *Relat
我是一名优秀的程序员,十分优秀！