この記事の例では、JS を使用して iGoogle のカスタム ホーム ページ モジュールのドラッグ アンド ドロップ効果を模倣する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
var Common = {
getEvent: function() {//ie/ff
if (document.all) {
window.event を返します;
}
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == イベント || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
arg0 を返す;
}
}
func = func.caller;
}
null を返す;
}、
getMousePos: function(ev) {
if (!ev) {
ev = this.getEvent();
}
if (ev.pageX || ev.pageY) {
戻り値 {
x: ev.pageX,
y: ev.pageY
};
}
if (document.documentElement && document.documentElement.scrollTop) {
戻り値 {
x: ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft,
y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop
};
}
else if (document.body) {
戻り値 {
x: ev.clientX document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY document.body.scrollTop - document.body.clientTop
};
}
}、
getElementPos: function(el) {
el = this.getItself(el);
var _x = 0、_y = 0;
{
を実行します
_x = el.offsetLeft;
_y = el.offsetTop;
while (el = el.offsetParent);
return { x: _x, y: _y };
}、
getItself: function(id) {
return "string" == ID の種類 ? document.getElementById(id) : id;
}、
getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0)、h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) },
isIE: document.all ? true : false、
setOuterHtml: function(obj, html) {
var Objrange = document.createRange();
obj.innerHTML = html;
Objrange.selectNodeContents(obj);
var frag = Objrange.extractContents();
obj.parentNode.insertBefore(frag, obj);
obj.parentNode.removeChild(obj);
}、
firstChild: function(parentObj, tagName) {
if (Common.isIE) {
returnparentObj.firstChild;
}
他 {
var arr =parentObj.getElementsByTagName(タグ名);
arr[0];
を返す
}
}、
lastChild: function(parentObj, tagName) {
if (Common.isIE) {
returnparentObj.lastChild;
}
他 {
var arr =parentObj.getElementsByTagName(タグ名);
return arr[arr.length - 1];
}
}、
setCookie: 関数(名前, 値) {
document.cookie = 名前 "=" 値;
}、
getCookie: 関数(名前) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i
if (!arr[1]) {
"" を返します;
}
if (arr[0] == 名前) {
return arr[1];
}
}
"" を返します;
}、
delCookie: 関数(名前) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = this.getCookie(name);
if (cval != null) document.cookie = name "=" cval ";expires=" exp.toGMTString();
}
}
var クラス = {
作成: function() {
return function() { this.init.apply(this, 引数); }
}
}
var Drag = Class.create();
Drag.prototype = {
init: function(titleBar、dragDiv、Options) {
//設置点击が透明かどうか、默认透明60%
titleBar = Common.getItself(titleBar);
ragDiv = Common.getItself(dragDiv);
this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };
if (オプション) {
this.opacity = オプション.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
if (オプション.エリア) {
if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };
if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };
if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };
if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };
}
}
他 {
this.opacity = 60;
}
this.originDragDiv = null;
this.tmpX = 0;
this.tmpY = 0;
this.moveable = false;
this.dragArray = [];
varragObj = this;
varragTbl = document.getElementById("dragTable");
titleBar.onmousedown = function(e) {
var ev = e || window.event || Common.getEvent();
// マウスの左ボタンによるドラッグのみを許可します。マウスの左ボタンは 1 Firefox から 0 です
If (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
}
else {
falseを返します。
}
var tmpColId;
for (c = 0; c
tmpColId = c;
休憩;
}
}
}
var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
var tmpObj = {colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };
//ドラッグアンドドロップできる各コンテナの現在の場所を保存します
ragObj.dragArray =ragObj.RegDragsPos();
//点線のボックスを挿入
var dumpedElement = document.createElement("div");
ダッシュ要素.スタイル.cssText = ドラッグDiv.style.cssText;
crashedElement.style.border = " 破線 2px #aaa ";
ダッシュ要素.style.marginBottom = "6px";
ダッシュ要素.style.width =ragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px" // 破線ボックスのサイズをドラッグDiv
と一致させるためにbodyWidthを減算します。
dumpedElement.style.height =ragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) "px"; //FF が正しいことを確認するために px を追加します
ダッシュ要素.style.position = "相対";
If (dragDiv.nextSibling) {
ragDiv.parentNode.insertBefore(dashedElement,ragDiv.nextSibling);
}
else {
ragDiv.parentNode.appendChild(dashedElement);
}
//ドラッグ時に絶対値
に変更
ragDiv.style.width =ragDiv.offsetWidth "px";
ragDiv.style.position = "絶対";
ragObj.moveable = true;
ragDiv.style.zIndex =ragObj.GetZindex() 1;
ragObj.tmpX = downPos.x -ragDiv.offsetLeft;
ragObj.tmpY = downPos.y -ragDiv.offsetTop;
ragDiv.setCapture();
} else {
window.captureEvents(Event.mousemove);
}
//FireFox はコンテナ内の画像のドラッグの問題を解決します
if (ev.preventDefault) {
ev.preventDefault();
ev.stopPropagation();
}
document.onmousemove = function(e) {
If (dragObj.moveable) {
var ev = e || Common.getEvent();
//IE はコンテナ内での画像のドラッグの問題を解決します
If (document.all) //IE
}
var movePos = Common.getMousePos(ev);
ragDiv.style.left = Math.max(Math.min(movePos.x -ragObj.tmpX,ragObj.dragArea.maxRight),dragObj.dragArea.maxLeft) "px";
続く;
if (movePos.x >ragObj.dragArray[k].PosLeft && movePos.x } document.onmouseup = function() { //务必写此IF内 ragDiv.style.width = ""; }; } }, window.onload = function() { window.onunload = function() { .dragDiv,.nodragDiv{
var targetDiv = null;
for (var k = 0; k
targetDiv = document.getElementById(dragObj.dragArray[k].DragId);
if (movePos.y
crashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
targetDiv.parentNode.insertBefore(dashedElement, targetDiv);
}
他 {
//往下移
crashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
if (targetDiv.nextSibling) {
targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);
}
他 {
targetDiv.parentNode.appendChild(dashedElement);
}
}
}
}
for (j = 0; j
if (movePos.x > startLeft && movePos.x
///列無しDIV
if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {
rashedElement.style.width =ragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
ragTbl.rows[0].cells[j].appendChild(dashedElement);
}
他 {
var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));
//処理特殊な状況：最上/下面MOVE時にDIVのある状況に至らず、また開始拖拽の列に戻る最上/下方
var tmpUp、tmpDown;
if (tmpObj.colId == j) {
以来
tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;
if (movepos.y & lt; tmpup) {/// 点線枠内に上から挿入
crashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
ragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
に
rashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px";
ragTbl.rows[0].cells[j].appendChild(dashedElement);
}
}
}
};
if (dragObj.moveable) {
if (Common.isIE) {
ragDiv.releaseCapture();
}
他 {
window.releaseEvents(dragDiv.mousemove);
}
ragObj.SetOpacity(dragDiv, 100);
ragObj.moveable = false;
ドラッグオブジェクト.tmpX = 0;
ドラッグオブジェクト.tmpY = 0;
ragDiv.style.left = "";
ragDiv.style.top = "";
ドラッグDiv.style.position = "";
ダッシュ要素.parentNode.insertBefore(dragDiv, ダッシュ要素);
ダッシュ要素.parentNode.removeChild(ダッシュ要素);
}
}、
SetOpacity: function(dragDiv, n) {
if (Common.isIE) {
ragDiv.filters.alpha.opacity = n;
}
他 {
ragDiv.style.opacity = n / 100;
}
GetZindex: function() {
var maxZindex = 0;
var divs = document.getElementsByTagName("div");
for (z = 0; z
maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
}
maxZindex を返します;
}、
RegDragsPos: function() {
var arrDragDivs = 新しい Array();
varragTbl = document.getElementById("dragTable");
var tmpDiv、tmpPos;
for (i = 0; i
if (tmpDiv.className == "dragDiv") {
tmpPos = Common.getElementPos(tmpDiv);
arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });
}
}
return arrDragDivs;
}
}
varragTbl = document.getElementById("dragTable");
if (Common.getCookie("configArr")) {
var configArr = eval("(" Common.getCookie("configArr") ")");
for (i = 0; i
}
}
}
new Drag("titleBar1", "dragDiv1");
new Drag("titleBar2", "dragDiv2");
new Drag("titleBar3", "dragDiv3");
new Drag("titleBar4", "dragDiv4");
new Drag("titleBar5", "dragDiv5");
}
varragTbl = document.getElementById("dragTable");
var configArr = "";
for (i = 0; i
for (j = 0; j
tmpStr = (tmpStr == "" ? "" : ",") "'"ragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'";
}
configArr = (configArr == "" ? "" : ",") "[" tmpStr "]";
}
//次のような形式: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]
Common.setCookie("configArr", "[" configArr "]");
}
位置:相対;
フィルター:アルファ(不透明度=100);
不透明度:1;
margin-bottom:6px;
背景色:#FFFFFF;
}
Title1
这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出>
Title2
Content2...
Title3
コンテンツ 3...
テーブル>
如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成
js字符串转数组Aug 03, 2023 pm 01:34 PMjs字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。
如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP
如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript
js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PMjs中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。
用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PMphp在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。
js是什么编程语言？May 05, 2019 am 10:22 AMjs全称JavaScript，是一种具有函数优先的轻量级，直译式、解释型或即时编译型的高级编程语言，是一种属于网络的高级脚本语言；JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式，如函数式编程。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7442
15137152