如何创建单击并拖动以使用jQuery更改对象的宽度？
[英]How can I create a click and drag to change the width of an object with jQuery?
问题描述
I have an object that I want to change the width of when you click on it and drag right or left. 
我有一个对象，当您单击它并向右或向左拖动时，我想更改其宽度。 Adding to the width or taking away from it as you move the mouse (or finger). 在移动鼠标（或手指）时增加宽度或减小宽度。
<style>
#changeMe {width:300px; height: 200px;}
</style>
<div id="changeMe">
Some Content
</div>
<script>
$('#changeMe').mousedown(function(){
//Some Code?????
});
</script>
4 个解决方案
解决方案1
1 已采纳 2013-08-20 16:58:55
What you want to do is track the x co-ords of the mouse. 您要做的是跟踪鼠标的x坐标。 If greater than they were before, increase size, if lower, decrease the size. 如果比以前大，则增大大小；如果比以前小，则减小大小。
Not tested but the below should be inspiration. 未经测试，但以下应为灵感。
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;
})
解决方案2
0 2013-08-20 16:45:35
解决方案3
0 2013-08-20 16:47:13
$(function() {
$('.testSubject').resizable();
});
or 要么
#changeMe {width:300px; height: 200px; border: 1px solid black;}
<body>
<div id="changeMe">
Some Content
</div>
</body>
$('#changeMe').resizable({});
Or 要么
$(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'));
}
);
});
解决方案4
0 2013-08-20 16:53:03
If I understand your question correctly, that you want to be able to dynamically increase/decrease the size of the object as it moves along the x-axis, I recommend that you use $('#changeMe'). 如果我正确地理解了您的问题，那么您希望能够随着对象沿x轴的移动而动态地增加/减小其大小，则建议您使用$（'＃changeMe'）。 offset() inside the jQuery UI drag event. jQuery UI 拖动事件中的offset（） 。
You can create a formula that you want to use based on an initial offset, and the new offset to size your container by $('#changeMe').css({ width: X, height: Y });, and insert whatever your X and Y values are in pixels. 您可以基于初始偏移量创建要使用的公式，并使用新偏移量通过$（'＃changeMe'）。css（{width：X，height：Y}）;调整容器大小，然后插入任何内容您的X和Y值以像素为单位。
Edited for further elaboration with code: 编辑为进一步详细说明代码：
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 });
}
});
If you used that as your base, it's a very nice and simple solution for your application. 如果您以此为基础，那么对于您的应用程序来说，这是一个非常不错的解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.