jquery 드래그 가능한 양식 제어 구현 code

jquery 드래그 가능한 양식 제어 구현 code_jquery

WBOY

풀어 주다： 2016-05-16 18:31:45

원래의

965명이 탐색했습니다.

따라서 JQUERY 프레임워크를 도입해야 합니다.
제 제어 코드를 js 파일에 넣고 직접 가져오기
제어 코드

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

 
$.fn.myDrag = function() { 
var self = $(this) 
self.css("position", "absolute") 
var p = self.position(); 
self.css({ left: p.left, top: p.top }) 
self.mousedown( 
function(event) { 
// debugger; 
self.data("ifDary", "true"); //드래그가 가능한지 여부를 나타내는 상태를 저장합니다
// debugger 
var selfLeft = event.pageX - parseInt (self.css("left")); //이 요소에 대한 마우스 왼쪽 계산 
var selfTop = event.pageY -parseInt(self.css("top")); this 요소의 상단 
self.data("selfLeft", selfLeft); //좌표 정보 저장 
self.data("selfTop", selfTop) 
} 
); >$( document).mouseup( 
function() { 
self.data("ifDary", "false"); 
//양식이 외부로 날아가는 것을 방지
var bWidth = $( window) .width(); 
var bHeight = $(window).height(); 
var currentleft = parsInt(self.css("left")) 
var currenttop = parseInt(self. css( "top")); 
if (currentleft <= 0) 
currentleft = 0; 
if (currentleft >= bWidth) 
currentleft = bWidth - self.width(); 
if (currenttop <= 0) 
currenttop = 0; 
if (currenttop >= bHeight) 
currenttop = bHeight - self.height() 
self.css({ left: currentleft, top: currenttop }); 
} 
); 
$(document).mousemove(function(event) { 
var state = self.data("ifDary"); 
 if (state && state == "true") { 
var selfLeft = event.pageX -parseInt(self.data("selfLeft")) //이 요소의 왼쪽 위치를 계산합니다. 
var selfTop = event.pageY -parseInt(self.data("selfTop")); 
self.css({ left: selfLeft, top: selfTop }) //이 요소의 위치 설정 
} 
 }); 
자체 반환 
} 

 