jQuery 드래그 div 요소 크기 변경
2957 단어 프런트엔드javascript
다음 코드를 복사해서 binddrag로 저장하는 플러그인입니다.js 파일이면 됩니다.
/**
* jquery div
* :
* :1.0.0
*
*
*
* minW => ( :number)
* minH => ( :number)
* banW => ( :boolean)
* banH => ( :boolean)
*
*
*
* ///////////////////////
* 1:
*
* $("div").binddrag();
*
* div , div
* , div
*
*
* ///////////////////////
* 2:
*
* $("div").binddrag({
* minW:100,
* minH:200
* });
*
* , div 100px
* , 200 。
* :minW minH div ,
*
*
* ///////////////////////
* 3:
*
* $("div").binddrag({
* minW:100,
* banH:true
* });
*
* , div ,
*
*/
$.fn.binddrag = function(obj){
if(typeof(obj) == "undefined") obj = {};
var minW = obj.minW || 0; //
var minH = obj.minH || 0; //
var banW = obj.banW || false; //
var banH = obj.banH || false; //
var thisObj = this; // div
var x = y = 0; // x,y
try{
if(typeof(minW) != "number") throw new Error(" ,minW number ");
if(typeof(minH) != "number") throw new Error(" ,minH number ");
if(typeof(banW) != "boolean") throw new Error(" ,banW boolean ");
if(typeof(banH) != "boolean") throw new Error(" ,banH boolean ");
}catch(e){
console.log(e.message);
return;
}
$(thisObj).mousedown(function(e){
// ,
x = e.clientX - $(this).width();
y = e.clientY - $(this).height();
//
$(document).bind("mousemove",mMove).bind("mouseup",mUp);
//
e.preventDefault();
});
//
function mMove(e){
var w = e.clientX - x;
var h = e.clientY - y;
!banW ? (
w >= minW ? ($(thisObj).width(w)) : ("")
):("");
!banH ?(
h >= minH ? ($(thisObj).height(h)) : ("")
):("");
}
//
function mUp(){
$(document).unbind("mousemove", mMove).unbind("mouseup", mUp)//
}
}
html 열
jQuery
aaa
bbb
$("#test").binddrag({
minW:100,
banH:true
});
//$(".box").binddrag();
//$(".box").each(function(){
// $(this).binddrag();
//});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
v-bind를 사용하여 CSS에 대한 Vue3 상태애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.