Question

让我分享一下我真正想要的东西 -

创建一个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/

Answer 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中，然后在容器上绑定draggable并在图像上调整大小。它与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>

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

1 个答案: