ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryのドラッグ可能なフォームコントロールの実装 code_jquery
jqueryのドラッグ可能なフォームコントロールの実装 code_jquery
- WBOYオリジナル
- 2016-05-16 18:31:45967ブラウズ
したがって、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 }); // この要素の位置を設定します
});
自己を返します;
}
コードをコピーします