个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我想要一个可拖动且可调整大小的图像(从所有 handle )，但是当从左侧 handle 之一调整图像大小时，拖动图像时不再考虑包含(例如:图像可以从容器中取出)。为什么会发生这种情况，我该怎么办？
代码在下面，这里是 jsfiddle:http://jsfiddle.net/F4c8p/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable({
containment: '#container'
});
$('#resizable').resizable({
containment: '#container',
handles: 'all'
});
});
</script>
</head>
<body>
<div style="width: 800px; height: 600px; border: 1px solid black" id="container">
<div id="draggable" style="display:inline-block">
<img id="resizable" src="http://www.extremetech.com/wp-content/uploads/2013/05/image-1.jpg"/>
</div>
</div>
</body>
</html>
最佳答案
发生的事情是，当您在除右下角以外的任何地方调整大小时，拖动的山墙位置不再与可调整大小的图像对齐。所以我添加了一些代码来将拖动山墙和图像对齐。
一旦图像被拖动，它似乎在重新调整大小时失去了它的包容。就像您将图像缩小，然后将图像移到右下角并展开它，就不再存在限制。但是这种行为也可以在您的原始 fiddle 中重现。
$(function() {
$( ".draggable" ).draggable({
containment: '#container'
});
$('#resizable').resizable({
containment: '#container',
handles: 'all',
stop: function(event, ui) {
var draggable = ui.helper.closest('.draggable');
var dragPos = draggable.position();
var left = dragPos.left + ui.position.left;
var top = dragPos.top + ui.position.top;
draggable.css('left',left+'px');
draggable.find('.ui-wrapper').css('left','auto');
draggable.css('top',top+'px');
draggable.find('.ui-wrapper').css('top','auto');
}
});
});
例子
关于jquery - 可调整大小和可拖动在一起不尊重遏制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20459027/
25
4
0
我在 R Markdown 文档中设置全局选项时遇到问题。下面是一个简单的例子。在这种情况下，我试图设置 global.par = TRUE .期望是任何 par()我在一个夹头中制作的规范被带到后续
Cloudflare 正在缓存我的请求，但它忽略了语言 header 。 示例请求: URL : https://api.example.com/v1/places/?param=1¶m=2
我正在尝试创建一个分面条形图，每个分面的百分比加起来为 100。对此的解决方案似乎是 group 的组合和 ..density.. .如何 - 在我看来 group与 fill 冲突. 数据: tes
我正在开发一个 C# 应用程序，该应用程序试图遵守其运行系统的时间格式。如果 Windows 控制面板更改为 24 小时格式，这就是应用程序显示时间的格式。无论如何，它成功地做到了这一点，除了只有在应
我用过 Vundle安装 editorconfig-vim插件。它正确加载并列在 :scriptnames 中.但是当我创建一个新文件时，比如 x.js ，缩进设置不是从 ~/.editorconfi
我曾尝试使用不同的方法自行解决这个问题，但没有一个给我预期的结果。 当我在我的项目的数据库中保存一个文本类型的变量时，问题就出现了。它用换行符保存它，事实上，当我尝试从我的一个 View 中编辑它时，
让我头疼的代码是这样的: $('#timeline .selected').removeClass('selected'); 它在 IE8 中无法正常运行。这些类确实被正确删除，但不知何故该元素仍然具
在处理 java 中的 Swing 对象(还有 JFX，但我稍后会担心这个问题)时，我遇到了一个让我摸不着头脑的问题。 这是我用来在程序中打开字体的代码。这是相当标准的。 public static
我正在为电子商务购物车使用 SOAP API，但我似乎无法让 session 在不同的页面中持续存在。 作为示例，我在下面有一些测试代码(带有一堆调试消息)，它将一个项目添加到购物车，然后查看购物车。
我有一个 fieldset与 legend可能加载了很长的字符串。 我想要 legend尊重 fieldset 的宽度并且只使用了 50% 的空间。 目前，如果legend太长它仍然只占fieldse
我有一个完整城市的 3D 模型，想展示一个 这些建筑物的等距 View 。我为此使用 gnuplot 多边形， 因为我不认为我可以将 pm3d 用于具有坐标的多边形 不在一个明确定义的网格上。多边形以
我理解 Clojure 的 *assert*变量可用于关闭断言，但我所做的一切似乎都不起作用。 (defn foo [a] {:pre [(pos? a)]} (assert (even? a
我有一个带有 DependencyProperty 和 CoerceValueCallback 的控件。此属性绑定(bind)到模型对象上的属性。 当将控件属性设置为导致强制的值时，绑定(bind)会
可以通过将它们放置在 smcs.rsp 中来创建全局定义，当您点击播放时 - 您会注意到代码的这些部分被点击，并且一切都表现得好像它应该的那样。 但是，在 MonoDevelop 中编辑源代码时，它无
总的来说，我非常努力尊重模块的隐私(如果变量以下划线为前缀，我不会使用它)。然而，我有一个极端的情况，它看起来相当“安全”。 这是演示 ( my previous question ) parser=
我有一个悬停动画的 div(我正在使用 jquery 的 .hover() 方法)。 div 包含一个带有选择的表单。打开选择并悬停在选项上会使 IE9 将其解释为“取消悬停”父 div，导致第二个悬
如果 max_user_connections 连接已打开，是否有方法告诉 Entity Framework 等待？ 我想我可以捕获异常并重试或保留一个计数器，但这最多感觉很糟糕。 我的 Azure
在我的测试中，BitmapFactory.decodeFile() 创建的 Bitmap 不遵循 EXIF header 。 例如，当我调用 Bitmap.getWidth() 时，设备拍摄的肖像图像
请帮助我了解如何解决这个问题。 这是我的路由文件 (auth-routes.js) const userControllers = require('../controllers/user') mod
我的应用程序有时会注入(inject) 标记到网站中，然后创建一个新的 带有亲戚的标签 src 例如设置并注入(inject) 导致浏览器从 http://localhost:8080/chapter
我是一名优秀的程序员,十分优秀！