程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在 jquery 中同时设置“可拖动”和“可调整大小”?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

开发过程中遇到如何在 jquery 中同时设置“可拖动”和“可调整大小”?的问题如何解决?下面主要结合日常开发的经验,给出你关于如何在 jquery 中同时设置“可拖动”和“可调整大小”?的解决方法建议,希望对你解决如何在 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,请注明来意。