Javascript 如何使用jQuery创建单击并拖动以更改对象的宽度？
我有一个对象，当你点击它并向左或向右拖动时，我想改变它的宽度。当您移动鼠标（或手指）时，增加或减少宽度Javascript 如何使用jQuery创建单击并拖动以更改对象的宽度？,javascript,jquery,events,touch,Javascript,Jquery,Events,Touch,我有一个对象，当你点击它并向左或向右拖动时，我想改变它的宽度。当您移动鼠标（或手指）时，增加或减少宽度 #更改名称{宽度：300px；高度：200px；} 一些内容 $（“#changeMe”）.mousedown（函数（）{ //一些代码？？？？？ }); 您只需要一个可调整大小的（{}）效果 $('#changeMe').resizable({}); 你可以看看这篇文章 或 如果我正确理解您的问题，即您希望能够在对象沿x轴移动时动态增大/减小对象的大小，我建议您使用$（“#change
#更改名称{宽度：300px；高度：200px；}
一些内容
$（“#changeMe”）.mousedown（函数（）{
//一些代码？？？？？
});
可调整大小的（{}）$('#changeMe').resizable({});
如果我正确理解您的问题，即您希望能够在对象沿x轴移动时动态增大/减小对象的大小，我建议您使用$（“#changeMe”）。在jQueryUI事件中 您可以根据初始偏移量和新偏移量创建要使用的公式，以按$（'#changeMe'）.css（{width:X，height:Y}）调整容器大小；，并插入以像素为单位的X和Y值 为进一步细化而编辑的代码：
var initX = 0;
var initW = 0;
$('#changeMe').draggable({
start: function() {
initX = $(this).offset().left;
initW = $(this).width();
},
drag: function() {
var deltaX = initX - $(this).offset().left;
$(this).css({ width: initW + deltaX });
}
});
如果您使用它作为基础，它将是一个非常好且简单的应用程序解决方案。您要做的是跟踪鼠标的x坐标。如果比以前大，则增大尺寸；如果减小，则减小尺寸 未经测试，但以下内容应为您提供灵感
var oldXPos = 0;
var isDragging = false;
$(document).mousemove(function(event) {
if (isDragging)
{
var difference = event.pageX - oldXPos;
// Do something with this value, will be an int related to how much it's moved
// ie $('#changeMe').css.width += difference;
}
oldXPos = event.pageX;
});
$('#changeMe').mousedown(function() {
isDragging = true;
})
$('#changeMe').mouseup(function() {
isDragging = false;
})
谢谢你的回答。我已经研究了offset（），据我所知，它可以根据另一个对象提供/更改顶部、底部、左侧和右侧。我不知道这是否行得通。当用户点击并向左拖动鼠标/手指16px时，我希望在用户拖动时对象宽度减16px。我能用偏移量做这个吗？是的。您可以使用offset（）执行此操作。偏移量返回文档的左上角。您还具有对象的高度/宽度。这是非常简单的计算宽度和阻力事件使这个计算动态。真棒！这正是我想要的！非常感谢你！还有一个问题要问你。我如何将其绑定到触摸拖动事件？这是什么意思？如果你的意思是鼠标直接接触div，它会改变大小，那么将“mousedown”替换为“mouseover”，将“mouseup”替换为“mouseout”。这会给你更多的悬停效果，当鼠标在div上时，它会对左右的变化做出反应，而不需要点击。不，我是说在像iPad或平板电脑这样的触摸设备上。我能找到答案，我回答了
#changeMe {width:300px; height: 200px; border: 1px solid black;}
<body>
<div id="changeMe">
Some Content
</div>
</body>
$('#changeMe').resizable({});
$(function(){
$('img[src*=small]').toggle(
function() {
$(this).attr('src',
$(this).attr('src').replace(/small/,'medium'));
},
function() {
$(this).attr('src',
$(this).attr('src').replace(/medium/,'large'));
},
function() {
$(this).attr('src',
$(this).attr('src').replace(/large/,'small'));
}
);
});
var initX = 0;
var initW = 0;
$('#changeMe').draggable({
start: function() {
initX = $(this).offset().left;
initW = $(this).width();
},
drag: function() {
var deltaX = initX - $(this).offset().left;
$(this).css({ width: initW + deltaX });
}
});
var oldXPos = 0;
var isDragging = false;
$(document).mousemove(function(event) {
if (isDragging)
{
var difference = event.pageX - oldXPos;
// Do something with this value, will be an int related to how much it's moved
// ie $('#changeMe').css.width += difference;
}
oldXPos = event.pageX;
});
$('#changeMe').mousedown(function() {
isDragging = true;
})
$('#changeMe').mouseup(function() {
isDragging = false;
})