Question

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

＆＃13;

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

＆＃13;

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

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

Answer 1

此代码会在拖动后增加可拖动的大小，并返回draggable-element的位置（作为偏移量）：

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

Demo

<强>参考

.draggable()

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

1 个答案: