Make image draggable and resizable within div

2019-06-02 23:42发布

站内问答 / jQuery
1396 1 5

Let me share what I actually want -

  1. Create a div.
  2. Onclick add an image to the div.
  3. Make this image draggable and resizable.
  4. We would be able to add multiple image into the div.

Below is my code I've done so far -

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/

1条回答
Ridiculous、
2楼-- · 2019-06-03 00:40

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:

$(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>

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

Example code: http://jsfiddle.net/lotusgodkk/8VY52/247/

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

HTML:

<div id="draggableHelper">
    <img id="image" src="image-src" />
</div>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)