如何在jquery中同时设置"可拖动"和"可调整大小"?



如何在jquery中同时设置"可拖动"one_answers"可缩放"?

以下代码只移动一次,不再移动。

我想继续移动和调整大小,该怎么办?

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

首先我们调用了.draggable((函数,该函数使div可拖动,然后我们调用了resizable((。为此,我们简单地定义:

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

您可能需要定义启动/停止/调整大小事件的回调函数。

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

},
stop: function(e, ui) {
alert('resizing stopped');
}
});

最新更新