jquery 中可调整大小、可拖动的对象。可能的？
Posted
技术标签:
【中文标题】jquery 中可调整大小、可拖动的对象。可能的？【英文标题】：Resizable, draggable object in jquery. Possible? 【发布时间】：2011-06-21 16:35:09 【问题描述】：我想要一个既可调整大小又可拖动的对象。我需要：
X 是 尺寸对象。
这可能吗？
http://www.jsfiddle.net/davidThomas/DGbT3/1/ 上有一个示例，它获取可拖动对象的 x 和 y。我怎样才能让它调整大小？
谢谢
值得补充的是，这个问题与上一个问题相关，并建立在这个问题的基础上：How to get the position of a draggable object?
【问题讨论】：
你的意思不是可拖动的，因为拖动和调整大小需要相同的鼠标移动和事件（单击、拖动），但可放置的项目只是坐在那里等待拖到上面，您可以调整大小任何时候都可以，我想。 谢谢你，正如你所说，它应该是可拖动的。 @Mahesh - 关心帮助而不是告诉它是可能的？ 是的！将是这个问题的答案 认真的吗？事实上，问题是“有可能吗？”但是我们可以假设 OP means“如何实现？”代替？ 【参考方案1】：当然...jQuery UI 适合复杂的行为，例如拖放、调整大小、选择和排序。
使用 jQuery UI，您可以：
拖动 放下 调整大小 排序您可以将所有内容链接在一起。
包含jquery-ui.css 文件对于调整大小功能很重要。
JSFIDDLE：http://jsfiddle.net/uQWRk/
这是存档的完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
$('#dragThis').resizable(
stop: function(event, ui)
var w = $(this).width();
var h = $(this).height();
console.log('StopEvent fired')
console.log('Width:'+w);
console.log('Height:'+h)
).draggable(
containment: $('body'),
drag: function()
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
,
stop: function()
var finalOffset = $(this).offset();
var finalxPos = finalOffset.left;
var finalyPos = finalOffset.top;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final X: ' + finalyPos);
);
$('#dropHere').droppable(
accept: '#dragThis',
over : function()
$(this).animate('border-width' : '5px',
'border-color' : '#0f0'
, 500);
$('#dragThis').draggable('option','containment',$(this));
);
);
</script>
<style type="text/css">
#dragThis
width: 6em;
height: 6em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 0 1em 1em 1em;
background-color: #fff;
background-color: rgba(255,255,255,0.5);
#dropHere
width: 12em;
height: 12em;
padding: 0.5em;
border: 3px solid #f90;
border-radius: 1em;
margin: 0 auto;
</style>
</head>
<body>
<div id="dragThis">
<ul>
<li id="posX"></li>
<li id="posY"></li>
<li id="finalX"></li>
<li id="finalY"></li>
</ul>
</div>
<div id="dropHere"></div>
</body>
</html>
参见 cmets：
【讨论】：
你能告诉我如何使jsfiddle.net/davidThomas/DGbT3/1上的可拖动对象也可以调整大小并获得它的大小吗？ 是的，我可以。给我一点时间来弄清楚。 这很酷。嗯，我没有仔细研究为什么，但是在draggable 的resize 事件中，droppable 有点跳跃。使用appendTo() 或类似的东西？
不明白你的意思。一切都按我的预期工作。这里没有跳转......在你的情况下可能是浏览器或css问题。
@gearsdigital，这是在我对另一个问题的回答的最新编辑中实现的。 JS Fiddle link。对于我的一生，我只是想不出如何合并resizable。我永远的耻辱...... XD【参考方案2】：
如果你的意思是可拖动的，那就是这样的：
$( "#elem" ).resizable().draggable();
您可以使用 css 指向的大小和位置（第一次）。 比您可以更改它们并使用 jQuery 获取（当您调整大小或移动时）。
您可以为 draggable() 和 resizable() 方法添加选项。参考在这里： http://jqueryui.com/demos/resizable/ 和 http://jqueryui.com/demos/draggable/
附：此代码需要 jquery-ui.js 文件和 jquery-ui.css（因为它会绘制一个标记来调整大小）
附言
使用您的链接： 在 JavaScript 框架中，我添加了以下行：
$('#dropHere').resizable();
我在托管资源“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css”中添加了css样式
它成功了！
【讨论】：
当我将 .resizable() 添加到示例jsfiddle.net/davidThomas/DGbT3/1时不起作用@ 如果没有 class="ui-widget-header" 和附加的 css 样式（任何 jquery 主题），可调整大小不起作用。 我没有尝试过你的链接，但在我本地的例子中，如果我删除 行，比调整大小不起作用。 我添加了 class="ui-widget-header" 但它仍然不起作用。我还需要做什么？您能否参考我提供的链接。 我去看看。但是你有没有附加 jquery-ui（不仅仅是 jquery）的 css 文件？以上是关于jquery 中可调整大小、可拖动的对象。可能的？的主要内容，如果未能解决你的问题，请参考以下文章
防止jquery draggable跳入可调整大小的droppable
如何在使用 jQuery（可拖动和可调整大小）拖动光标时调整图像大小
外部 jquery 可拖动/可调整大小的 div 不允许我选择内部跨度的文本