製作圖像拖動和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

回答

相關問題