如何在jQuery中添加可拖动的“添加图像”图标

Deepak 发表于 Dev

迪帕克

我很好奇如何add image在堆栈溢出中使用jquery来添加图标。当用户单击它时，它会增大其大小，并且会随用户放置它的位置移动。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Draggable - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <style>
            #draggable { width: 50px; height: 50px; padding: 0.5em; }
        </style>
        <script>
            $(function() {
                 $( "#draggable" ).draggable();
            });
        </script>
    </head>
    <body>
       <div id="draggable" class="ui-widget-content">
            <image src="/addImage" />
        </div>
    </body>
</html>

在这里，我添加了简单的图像，用户可以在该图像上放置他想放置图像的位置。我不知道如何在拖动后增加该div的大小。我也想获得用户添加它的位置。

我也希望它应要求在PC上浏览以上传图像

经验

此代码将在拖动后增加可拖动对象的大小，并返回可拖动元素的位置（作为偏移量）：

$(function () {
    $("#draggable").draggable({
        stop: function( event, ui ) {         
            ui.helper.css({
                width: '200px',
                height: '200px'
            });
            $('#position').text('Top: ' + ui.position.top + ' Left: ' + ui.position.left)
        }
    });
});

演示版

参考

.draggable（）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。