如何双向扩展元素宽度
How to extend element width both ways?
这个标题听起来令人困惑吗?我想无论如何都可能很好。
当我的人点击页面时,我希望他们能够让我更短和更长。
你可以在这里明白我的意思:
http://jsfiddle.net/shawn31313/HKLhE/9/show/
执行鼠标向下操作,它们会将您的移动向右移动。它工作正常。但是现在,将鼠标向左移动。看到问题了吗?它的方向与向右拖动时的方向相同。我知道这是因为我正在使用宽度,显然宽度是单向的。
这是我到目前为止的代码:
$(document).ready(function() {
var dragStatus = 0,
getPos, giveRandomID;
$(document).mousedown(function(event) {
dragStatus = 0;
getPos = {
top: event.clientY,
left: event.clientX
};
giveRandomID = Math.floor(Math.random() * 99999);
});
$(document).mousemove(function() {
var line = $('#line' + giveRandomID);
if (dragStatus == 0) {
$('body').append("<div id='line" + giveRandomID + "' class='line' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>");
dragStatus = 1;
}
if (dragStatus == 1) {
if (event.clientX > line.offset().left) {
line.css({
width: event.clientX - line.offset().left
});
} else {
line.css({
width: line.offset().left - event.clientX
});
}
//for DEG "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2)
}
});
$(document).mouseup(function() {
dragStatus = 2;
});
});
我希望有人可以帮助我解决这个问题。也许是一种完全不同的设置方式。只是解决这个问题的东西
若要使线条向左延伸,必须更新 left
属性:
if (event.clientX > getPos.left) {
line.css({
left: getPos.left,
width: event.clientX - getPos.left
});
} else {
line.css({
left: event.clientX,
width: getPos.left - event.clientX
});
}
jsFiddle: http://jsfiddle.net/HKLhE/16/
您需要
修改else
大小写(向右移动)以将left
属性设置为 auto
,将 right
属性设置为初始鼠标单击 X 位置。与offset().left
相比,向左移动不起作用,因为该值正在发生变化。
试试这个尺寸:
http://jsfiddle.net/HKLhE/20/
编辑:Brilliand的解决方案更加优雅。
相关文章:
- 如何在不影响其他元素的情况下扩展DIV
- 如何通过铬扩展注入反应元素
- 如何使用Javascript扩展HTML元素
- 制作一个chrome扩展,替换css和js元素
- firefox扩展/如何访问动态创建的元素
- MDN文档中关于弄清楚XUL元素的段落是什么意思:“如何将覆盖扩展转换为无重启”
- 清空并附加元素的扩展高度
- 在自定义元素中扩展 HTMLCanvasElement 问题
- 扩展验证.js并验证单个元素
- “class”属性的值隐式扩展某些标记元素
- Chrome扩展:等待元素加载(async js)
- 如何将DOM元素扩展为类(没有jQuery)
- Javascript:如何将数组元素扩展到所有其他元素并创建一个数组
- ES6模块导出-DOM元素扩展方法
- 在不检查element .length的情况下,将可迭代元素或不可迭代元素扩展为数组
- 使用jQuery使元素扩展到其父元素之外
- 在条件求值为true时获取元素(扩展ElementArrayFinder)
- 如何创建自定义元素扩展类的新实例
- 将屏幕一侧的元素扩展到屏幕底部
- jQuery ui resizable不能将元素扩展到左侧或顶部