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

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:31 PM

드래그 가능

따라서 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 프레임워크인데 그런 건 없고 혼자서 여기저기 찾아보고 밟아봤습니다
//이것은 내 제어 코드입니다

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7651

Cakephp 튜토리얼

1392

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 미니 크로스 워드 답변

110

Related knowledge

Layui를 사용하여 드래그 앤 드롭 데이터 시각화 대시보드 기능을 구현하는 방법 Oct 26, 2023 am 11:27 AM

Layui를 사용하여 드래그 앤 드롭 데이터 시각화 대시보드 기능을 구현하는 방법 소개: 데이터 시각화는 현대 생활에서 점점 더 많이 사용되고 있으며 대시보드의 개발은 이에 대한 중요한 부분입니다. 이 기사에서는 Layui 프레임워크를 사용하여 드래그 앤 드롭 데이터 시각화 대시보드 기능을 구현하는 방법을 주로 소개합니다. 이를 통해 사용자는 자신의 데이터 표시 모듈을 유연하게 맞춤 설정할 수 있습니다. 1. Layui 프레임워크 다운로드 준비 먼저 Layui 프레임워크를 다운로드하고 구성해야 합니다. 레이이 공식 홈페이지(https://www.kr)에서 다운로드 가능합니다.

Layui를 사용하여 드래그 가능한 탭 구성 요소 기능을 구현하는 방법 Oct 26, 2023 pm 01:05 PM

Layui를 사용하여 드래그 가능한 탭 구성 요소 기능을 구현하는 방법 Layui는 풍부한 구성 요소와 편리한 API를 제공하는 경량 프런트 엔드 UI 프레임워크로 프런트 엔드 개발을 더욱 간단하고 효율적으로 만듭니다. 그 중 탭 컴포넌트는 레이이에서 흔히 사용하는 기능 중 하나이다. 실제 개발에서는 탭을 드래그 앤 드롭하여 정렬하거나 드래그하여 배치해야 하는 경우가 종종 있습니다. 이번 글에서는 Layui를 이용하여 드래그 가능한 탭 컴포넌트 기능을 구현하는 방법을 예시 형태로 소개하겠습니다. 먼저 레이이 관련 내용을 소개하겠습니다.

Vue를 사용하여 드래그 앤 드롭 시각적 편집기를 구현하는 방법은 무엇입니까? Jun 25, 2023 pm 08:22 PM

Vue는 최신 JavaScript 프레임워크로, 시각적 편집기를 구현할 때 다양한 구성 요소, 지침, 수명 주기 후크 및 기타 기능을 제공할 수 있으며 드래그 앤 드롭 상호 작용 구현을 위한 몇 가지 편리한 API도 제공합니다. 이 기사에서는 웹 개발자가 프로젝트에서 해당 기능을 신속하게 구현할 수 있도록 Vue2.x를 사용하여 드래그 앤 드롭 시각적 편집기를 구현하는 방법을 소개합니다. 컴포넌트 구조 먼저, 일반적으로 다음과 같이 구성되는 비주얼 편집기의 컴포넌트 구조를 분할해야 합니다.

Layui를 사용하여 드래그 가능한 페이징 기능을 구현하는 방법 Oct 25, 2023 pm 12:46 PM

Layui를 사용하여 드래그 가능한 페이징 기능을 구현하는 방법 소개: 웹 개발에서 페이징 기능은 매우 일반적인 요구 사항 중 하나입니다. Layui는 개발 작업을 크게 단순화할 수 있는 풍부한 구성 요소와 기능을 제공하는 경량 프런트 엔드 UI 프레임워크입니다. 이 글에서는 Layui를 사용하여 드래그 앤 드롭 페이징 기능을 구현하는 방법을 소개하고 참조할 수 있는 구체적인 코드 예제를 제공합니다. 1. 레이유이의 기본 사용법 시작하기 전에 먼저 라유이의 기본적인 사용법을 이해해야 합니다. 레이이 코어

Layui를 사용하여 드래그 가능한 트리 메뉴 기능을 구현하는 방법 Oct 27, 2023 pm 06:51 PM

Layui를 사용하여 드래그 가능한 트리 메뉴를 구현하는 방법 개요: Layui는 개발자가 페이지를 빠르게 구축할 수 있도록 다양한 구성 요소와 플러그인을 제공하는 간단하고 사용하기 쉬운 프런트 엔드 프레임워크입니다. 이 기사에서는 Layui를 사용하여 드래그 가능한 트리 메뉴 기능을 구현하는 방법을 소개합니다. 레이유이에서 제공하는 트리 컴포넌트를 이용하고, 드래그 앤 드롭 플러그인으로 확장하여 트리 메뉴의 드래그 앤 드롭 정렬 기능을 구현해보겠습니다. 관련 리소스 소개 먼저 Layui 프레임워크 파일을 포함하여 Layui의 관련 리소스 파일을 소개해야 합니다.

Layui를 사용하여 드래그 앤 드롭 직소 퍼즐 기능을 구현하는 방법 Oct 25, 2023 am 11:42 AM

Layui를 사용하여 드래그 가능한 직소 퍼즐 기능을 구현하는 방법 직소 퍼즐은 고전적인 엔터테인먼트 활동이며 현재 많은 웹 및 모바일 애플리케이션에서 이 게임의 버전을 제공하고 있습니다. 이번 글에서는 Layui 프레임워크를 사용하여 드래그 앤 드롭 퍼즐 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공하겠습니다. Layui는 단순화된 인터페이스 구성 요소 세트와 풍부한 대화형 애니메이션 효과를 제공하는 경량 프런트 엔드 프레임워크입니다. Layui 프레임워크를 사용하면 아름답고 사용하기 쉬운 웹 애플리케이션을 빠르게 개발할 수 있습니다. 달성하기 위해 싸우다

Layui를 사용하여 드래그 가능한 진행률 표시줄 기능을 구현하는 방법 Oct 24, 2023 am 11:47 AM

Layui를 사용하여 드래그 가능한 진행률 표시줄 기능을 구현하는 방법 Layui는 HTML5 및 CSS3를 사용하는 프런트 엔드 프레임워크로 사용이 쉽고 확장이 용이하며 다양한 웹 개발 프로젝트에서 널리 사용됩니다. Layui를 사용하는 과정에서 드래그 가능한 진행률 표시줄과 같은 특정 대화형 기능을 구현해야 하는 경우가 있습니다. 이 글에서는 Layui를 사용하여 이 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Layui의 관련 리소스 파일을 소개해야 합니다. 온라인 링크를 통해

Vue에서 드래그 가능한 레이아웃을 구현하는 방법은 무엇입니까? Jun 25, 2023 am 08:48 AM

웹 프런트 엔드 기술이 지속적으로 발전함에 따라 점점 더 많은 개발자가 SPA(Single Page Application) 아키텍처를 사용하여 애플리케이션을 구축하기 시작했습니다. 현재 가장 인기 있는 웹 프런트엔드 프레임워크 중 하나인 Vue는 SPA 애플리케이션을 보다 쉽게 구축할 수 있는 풍부한 구성 요소 라이브러리와 도구를 제공합니다. Vue는 드래그 가능한 레이아웃 구현과 관련하여 몇 가지 편리한 솔루션도 제공합니다. 1. Vue-Grid-Layout을 사용하세요.Vue-Grid-Layout은

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제