使图像在div中可拖动和可调整大小

本文介绍了使图像在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?

请找到附带的小提琴：

Please find the attached fiddle : http://jsfiddle.net/8VY52/249/

推荐答案

更新：I简化你的代码一点。以下是链接：

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.

示例代码：

$('#draggableHelper').draggable();
$('#image').resizable();

HTML：

<div id="draggableHelper">
    <img id="image" src="image-src" />
</div>

这篇关于使图像在div中可拖动和可调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！