如何在 jquery 中同时设置“可拖动”和“调整大小”？

Question

How do I set'draggable' and'resizable' at the same time in jquery?如何在 jquery 中同时设置“可拖动”和“调整大小”？

The following code is moved only once and no longer moves.下面的代码只移动一次，不再移动。

I want to keep moving and resizing, what should I do?我想继续移动和调整大小，我该怎么办？

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style/result.css?v=1.3" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<%@ page import = "java.io.*" %> 

<script type="text/javaScript" >

$(function(){ 
    var counts = [0];  
    $(".dragImg").draggable({
        helper: "clone",
        //Create counter
        start: function() { counts[0]++; }
    }); 
    $("#dropHere1").droppable({
        drop: function(e, ui){
            $(this).append($(ui.helper).clone());
            
            $(ui.helper).clone().draggable();
            $("#dropHere1 .dragImg").addClass("item-"+counts[0]); 

            $("#dropHere1 .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");

            $(".item-"+counts[0]).dblclick(function() {
                $(this).remove();
            }).resizable();
        }
    });
});
</script>
<img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" class="dragImg" width="90" height="90" >
<div id="dropHere1" ></div>

Answer 1

First we called.draggable() function that makes the DIV draggable and then we called resizable().首先我们调用了.draggable() function 使DIV 可拖动，然后我们调用了resizable()。 To do so we simply define:为此，我们只需定义：

$('#dragResizeDiv')
    .draggable()
    .resizable();

You may want to define callback functions on start/stop/resize events.您可能希望在开始/停止/调整大小事件上定义回调函数。

  $('#resizeDiv')
        .resizable({
            start: function(e, ui) {
                alert('resizing started');
            },
            resize: function(e, ui) {
            
            },
            stop: function(e, ui) {
                alert('resizing stopped');
            }
        });

如何在 jquery 中同时设置“可拖动”和“调整大小”？

问题描述

1 个解决方案

解决方案1
0 2021-04-28 07:44:52

如何在 jquery 中同时设置“可拖动”和“调整大小”？

问题描述

1 个解决方案

解决方案1 0 2021-04-28 07:44:52

解决方案1
0 2021-04-28 07:44:52