Make image draggable and resizable within div

2019-06-02 23:47发布

站内文章 / jQuery
23 0 0

问题:

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:

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>


标签： jquery html css draggable resizable
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~