制作图像拖动和DIV

内可调整大小

让我分享一下我真正想要的 -制作图像拖动和DIV

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

来源

2014-05-01 Kartic

请提供[小提琴]（http://jsfiddle.net） – Thorsten

您好的Thorsten，小提琴创建。 – Kartic

更新：我简化你的代码一点点。这里是链接：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>

来源

2014-05-01 12:51:20

嗨Kamlesh，谢谢你的努力。你能看看我创建的小提琴吗？我真的不能依靠id，因为图像是动态添加的，并且具有相同的类而不是id。 – Kartic

它为我工作。谢谢！ – Kartic

你的第二个例子对我的作品中的jsfiddle，但是当我将其粘贴到自己的HTML页，这是行不通的。这段代码与添加jquery 2.2.2的链接完全相同。此外，在jsfiddle中尝试使用第一个示例时，图像右侧似乎有看不见的可拖动点。 – kojow7

制作图像拖动和DIV

回答

相关问题