Fatal编程技术网
  • jquery/
  • Jquery 使图像在div中可拖动和调整大小

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

jquery html css

Jquery 使图像在div中可拖动和调整大小,jquery,html,css,draggable,resizable,Jquery,Html,Css,Draggable,Resizable,让我分享我真正想要的- 创建一个div。 Onclick将图像添加到div。 使此图像可拖动并可调整大小。 我们可以在div中添加多个图像。 下面是我迄今为止完成的代码- JS: HTML: 问题是我可以使图像可以拖动或调整大小。不是两者都有。例如，在上面的代码中，图像是可调整大小的，而不是可拖动的。谁能告诉我我做错了什么 请查看附件：更新：我简化了您的代码。以下是链接： 我希望这就是你要找的 Javascript: $(document).ready(function () { $(docum

让我分享我真正想要的-

创建一个div。 Onclick将图像添加到div。 使此图像可拖动并可调整大小。 我们可以在div中添加多个图像。 下面是我迄今为止完成的代码-

JS:

HTML:

问题是我可以使图像可以拖动或调整大小。不是两者都有。例如，在上面的代码中，图像是可调整大小的，而不是可拖动的。谁能告诉我我做错了什么

请查看附件：

更新：我简化了您的代码。以下是链接：

我希望这就是你要找的

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:

更新：我简化了你的代码。以下是链接：

我希望这就是你要找的

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:

请提供Hi Thorsten，Fiddle created。请提供Hi Thorsten，Fiddle created。Hi Kamlesh，感谢您的努力。你能看看我做的小提琴吗。我真的不能依赖id，因为图像是动态添加的，并且具有相同的类而不是id。您的第二个示例在JSFIDLE中适用于我，但当我将其粘贴到自己的本地html页面时，它就不起作用了。当然，代码与添加到jquery2.2.2的链接完全相同。另外，在JSFIDLE中尝试第一个示例时，图像右侧似乎有不可见的可拖动点。@kojow7在运行本地html页面时，您在控制台中发现任何错误吗？找到了，谢谢！通过查看控制台，我意识到我需要安装jQueryUI。你能看看我做的小提琴吗。我真的不能依赖id，因为图像是动态添加的，并且具有相同的类而不是id。您的第二个示例在JSFIDLE中适用于我，但当我将其粘贴到自己的本地html页面时，它就不起作用了。当然，代码与添加到jquery2.2.2的链接完全相同。另外，在JSFIDLE中尝试第一个示例时，图像右侧似乎有不可见的可拖动点。@kojow7在运行本地html页面时，您在控制台中发现任何错误吗？找到了，谢谢！通过查看控制台，我意识到我需要安装jQueryUI。 
<!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>

$(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;
});
});

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

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

<div id="draggableHelper">
    <img id="image" src="image-src" />
</div>