使图像在 div 内可拖动和调整大小答案

【问题标题】：Make image draggable and resizable within div使图像在 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 创建了。

标签： jquery html css draggable resizable

【解决方案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。