大佬教程收集整理的这篇文章主要介绍了如何在 jquery 中同时设置“可拖动”和“可调整大小”?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在jquery中同时设置'draggable'和'resizable'?
以下代码只移动一次,不再移动。
我想继续移动和调整大小,我该怎么办?
<%@ 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');
}
});
以上是大佬教程为你收集整理的如何在 jquery 中同时设置“可拖动”和“可调整大小”?全部内容,希望文章能够帮你解决如何在 jquery 中同时设置“可拖动”和“可调整大小”?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。