使图像在 div 内可拖动和调整大小
Posted
技术标签:
【中文标题】使图像在 div 内可拖动和调整大小【英文标题】：Make image draggable and resizable within div 【发布时间】：2014-06-17 19:11:55 【问题描述】：让我分享一下我真正想要的 -
-
创建一个 div。
Onclick 将图像添加到 div。
使此图像可拖动并可调整大小。
我们可以在 div 中添加多个图像。
下面是我到目前为止所做的代码 -
JS：
$.fn.extend(
draggableChildren: function(selector)
$(this).on("mouseover", selector, function()
if(!$(this).is(":ui-draggable"))
$(this).draggable( containment: "parent" );
);
return this;
);
$.fn.extend(
resizableChildren: function(selector)
$(this).on("mouseover", selector, function()
if(!$(this).is(":ui-resizable"))
$(this).resizable( containment: "parent" );
);
);
$(document).ready(function()
setImageProperty=function(imageSource)
$(".block").draggableChildren(".blocks");
$(".block").resizableChildren(".blocks");
$(".block").append('<img class="blocks" src='+imageSource+' />');
);
CSS：
.blocks
display: inline-block;
width: 30%;
.block
width:50%;
height : 50%;
padding:10px;
border:1px solid #C8C8C8;
margin:0px;
background-color:#F0F0F0;
margin-left: auto;
margin-right: auto;
position : relative;
overflow: hidden;
html：
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" />
<title>Upload Image</title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/jquery-ui.js"></script>
<script src="../js/upload_common.js"></script>
<link rel="stylesheet" href="../css/jquery-ui.css" />
<link rel="stylesheet" href="../css/upload_common.css" />
</head>
<body>
<br><div class="block"></div>
<center>
<br>
<input class="button" type="button" id="showExistingImg" value="Show Uploaded Images" />
<input id="style_Browse" type="button" value="Upload Images" class="button" />
<input id="btn_browse" type="file" onchange="loadname(this,'previewImg');" />
<div id="existingImges">
<br>
<a class="block-add" href="javascript:void(0)" onclick="setImageProperty('../images/1.jpg')" ><img class="uploadImage" src="../images/1.jpg" /></a>
<a class="block-add" href="javascript:void(0)" onclick="setImageProperty('../images/2.jpg')" ><img class="uploadImage" src="../images/2.jpg" /></a>
<a class="block-add" href="javascript:void(0)" onclick="setImageProperty('../images/3.jpg')" ><img class="uploadImage" src="../images/3.jpg" /></a>
</center>
</body>
</html>
问题是我可以使图像可拖动或调整大小。不是都。例如，在上面的代码中，图像是可调整大小的，而不是可拖动的。谁能指导我做错了什么？
请找到随附的小提琴：http://jsfiddle.net/8VY52/249/
【问题讨论】：
请提供fiddle 嗨，Thorsten，Fiddle 创建了。 【参考方案1】：更新：我稍微简化了您的代码。这是链接：http://jsfiddle.net/lotusgodkk/8VY52/250/
我希望这是您正在寻找的。
Javascript：
$(document).ready(function ()
$(document).on('click', '.block-add', function ()
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
);
);
HTML：
<br/>
<div class="block"></div>
<center>
<br/>
<div id="existingImges">
<br/><a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="http://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" /></a>
</div>
</center>
您应该将图像包装到一个 div 中，然后在容器上绑定可拖动并在图像上调整大小。它与 jQuery 可拖动和调整大小的工作方式有关。
jQuery Ticket for resizable and draggable on image
示例代码：http://jsfiddle.net/lotusgodkk/8VY52/247/
$('#draggableHelper').draggable();
$('#image').resizable();
HTML：
<div id="draggableHelper">
<img id="image" src="image-src" />
</div>
【讨论】：
嗨，Kamlesh，感谢您的努力。你能看看我创建的小提琴吗？我真的不能依赖 id，因为图像是动态添加的，并且具有相同的类而不是 id。 您的第二个示例在 jsfiddle 中对我有用，但是当我将它粘贴到我自己的本地 html 页面时它不起作用。当然，代码与添加到 jquery 2.2.2 的链接完全相同。此外，在 jsfiddle 中尝试您的第一个示例时，图像右侧似乎有不可见的可拖动点。 @kojow7 运行本地html页面时有没有发现控制台报错 明白了，谢谢！通过查看控制台，我意识到我需要安装 jQuery UI。以上是关于使图像在 div 内可拖动和调整大小的主要内容，如果未能解决你的问题，请参考以下文章