如何添加可拖动的“;添加图像”;jquery中的图标

how to add draggable "add image" icon in jquery

本文关键字：添加 图标 图像 jquery 拖动 何添加      更新时间：2023-09-26

我很想知道如何使用jquery添加add image图标作为堆栈内溢出。当用户点击它时，它会增加大小，并移动到用户放置的任何地方

<!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（）

相关文章：