jqueryのドラッグ可能なフォームコントロールの実装 code

jqueryのドラッグ可能なフォームコントロールの実装 code_jquery

WBOY

リリース： 2016-05-16 18:31:45

オリジナル

971 人が閲覧しました

したがって、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; (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 = parseInt("left"); 
var currenttop = parseInt(self. css( "top")); 
if (currentleft currentleft = 0; 
if (currentleft >= bWidth) 
currentleft = bWidth - self.width(); 
if (currenttop currenttop = 0; 
if (currenttop >= bHeight) 
currenttop = bHeight - 
self.css({左: 現在の左、上: 現在のトップ }); 
} 
); 
$(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 }); // この要素の位置を設定します 
 }); 
自己を返します; 
} 

 


コードをコピーします