>  기사  >  웹 프론트엔드  >  jquery 드래그 가능한 양식 제어 구현 code_jquery

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

WBOY
WBOY원래의
2016-05-16 18:31:45889검색

따라서 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 }) //이 요소의 위치 설정
}
});
자체 반환
}

자바스크립트 코드

코드 복사 코드는 다음과 같습니다.
이게 JQUERY 프레임워크인데 그런 건 없고 혼자서 여기저기 찾아보고 밟아봤습니다
//이것은 내 제어 코드입니다