使图像在div中可拖动和可调整大小 [英] Make image draggable and resizable within div
问题描述
让我分享我的实际需要 -
Let me share what I actually want -
- 创建一个div。
- Onclick add
- 将此图片拖曳和调整大小。
- 我们可以将多个图片添加到div。
- Create a div.
- Onclick add an image to the div.
- Make this image draggable and resizable.
- We would be able to add multiple image into the div.
以下是我到目前为止所做的代码 -
Below is my code I've done so far -
JS： p>
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>
问题是我可以使图像可拖动或可调整大小。不是两个。例如，在上面的代码中，图像是可调整大小的，不可拖动。任何人都可以指导我做错了什么？
Problem is I can make the image either draggable or resizable. Not both. For instance, in the code above, the image is resizable, not draggable. Can anyone please guide me what I am doing wrong?
请找到附带的小提琴： http://jsfiddle.net/8VY52/249/
Please find the attached fiddle : http://jsfiddle.net/8VY52/249/
推荐答案
更新：I简化你的代码一点。以下是链接： http://jsfiddle.net/lotusgodkk/8VY52/250/
Update: I simplified your code a little bit. Here is the link: http://jsfiddle.net/lotusgodkk/8VY52/250/
我希望这是您要找的。
I hope this is what you are looking for.
Javascript：
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，然后将draggable绑定到容器上，并在图像上调整大小。它与jQuery draggable和resizable的工作方式有关。
You should wrap image into a div and then bind draggable on the container and resizable on the image. It has something to do with how jQuery draggable and resizable works.
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>
这篇关于使图像在div中可拖动和可调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
