js拖拽和放置 javascript drag and drop

阿新 • • 發佈：2018-12-21

js拖拽和放置效果.

這個drag-drop.html

XML/HTML程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>js drag + drop koyoz

</title>
<styletype="text/css">
* {margin:0px;padding:0px;font-size:12px;}
#drop{position:absolute;width:200px;height:300px;border:1px #A5B6C8 solid;background:#EEF3F7;left:400px;top:100px;padding:10px;}
.item {width:100px; height:28px;background:#C2ECA7;text-align:center;line-height:28px;cursor:pointer;margin-top:5px;}
#items {margin: 50px 0 0 100px;}
</style>
</head>
<body>
<divid="drop">拖過來試試</div>
<divid="items">
<divid="item1"class="item">11111</div>
<divid="item2"class="item">22222</div>
<divid="item3"class="item">33333</div>
<divid="item4"class

="item">44444</div>
<divid="item5"class="item">55555</div>
<divid="item6"class="item">66666</div>
</div>
<scripttype="text/javascript"src="drag-drop.js"></script>
<scripttype="text/javascript">
//逐個註冊drag事件
var itemx = document.getElementById('items').getElementsByTagName("div")
for(var i = 0; l = itemx.length, i <l; i++)
{
makeDrag(itemx[i]);
}
//註冊放置物件
var dropItem = document.getElementById('drop');
makeDrop(dropItem);
</script>
</body>
</html>

這是drag-drop.js

JavaScript程式碼

var makeDrag_flag = false;
var makeDrop_objs = [];
//註冊放置物件
function makeDrop(obj)
{
makeDrop_objs.push(obj);
}
//註冊拖動物件
function makeDrag(obj)
{
obj.onmousedown = function (e)
{
if (!document.all) e.preventDefault();
var oPos = getObjPos(obj);
var cPos = getCurPos(e);
makeDrag_flag = true;
document.onmouseup = function (e){
makeDrag_flag = false;
document.onmousemove = null;
document.onmouseup = null;
//放置位置檢查開始
var nPos = getCurPos(e);
for(i = 0; i < makeDrop_objs.length; i++)
{
var tg = makeDrop_objs[i];
var tPos = getObjPos(tg);
var tg_w = tg.offsetWidth;
var tg_h = tg.offsetHeight;
if ((nPos.x > tPos.x) && (nPos.y > tPos.y) && (nPos.x < tPos.x + tg_w) && (nPos.y < tPos.y + tg_h))
{
tg.innerHTML += '<p>' + obj.innerHTML + '拖入</p>'
obj.style.display = 'none';
}
}
//放置位置檢查結束
};
document.onmousemove = function (e)
{
if (makeDrag_flag)
{
obj.style.position = 'absolute';
var Pos = getCurPos(e);
obj.style.left = Pos.x - cPos.x + oPos.x + 'px';
obj.style.top = Pos.y - cPos.y + oPos.y + 'px';
}
returnfalse;
}
}
}
function getObjPos(obj)
{
var x = y = 0;
if (obj.getBoundingClientRect)
{
var box = obj.getBoundingClientRect();
var D = document.documentElement;
x = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;
y = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop;
}
else
{
for(; obj != document.body; x += obj.offsetLeft, y += obj.offsetTop, obj = obj.offsetParent );
}
return {'x':x, 'y':y};
}
function getCurPos(e)
{
e = e || window.event;
var D = document.documentElement;
if (e.pageX) return {x: e.pageX, y: e.pageY};
return {
x: e.clientX + D.scrollLeft - D.clientLeft,
y: e.clientY + D.scrollTop - D.clientTop
};
}

js拖拽和放置 javascript drag and drop

js拖拽和放置效果.這個drag-drop.htmlXML/HTML程式碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

【JavaScript】實現元素拖拽和碰撞檢測

function drag() { var src1 = document.getElementById("src-1"); var src2 = document.getElementById("src-2"); var src3 =

Android中Drag and Drop拖拽功能的使用2-----交換佈局中子控制元件的位置

Android中的拖拽功能是有自帶的api的；（很多時候會誤以為要自定義控制元件，所以我放到了，自定義目錄下）參考文件： http://www.android-doc.com/guide/topics/ui/drag-drop.html 我寫了一個例子分析: 效果圖：思路： 1

Android中Drag and Drop拖拽功能的使用1-----基本實現

Android中的拖拽功能是有自帶的api的；（很多時候會誤以為要自定義控制元件，所以我放到了，自定義目錄下）參考文件： http://www.android-doc.com/guide/topics/ui/drag-drop.html 我寫了一個例子分析: 效果圖：思路： 1主要

JS原生拖拽和input聯想和自動補全

('mousedown', (event) => { var _ele = event.target _newele.style.width = div1Style.width _newele.style.height = div1Style.height _n

js拖拽分析

diff gpo strong col win mousedown 距離設置 tle js拖拽分析思路 1、三個鼠標事件，mousedown，mousemove，mouseup 2、可移動性absolute 3、邊界限制得到鼠標點擊處和div邊界的距離，然後得出top

js 拖拽實現面向對象

oct utf-8 xhtml bsp AC name java prototype new // JavaScript Document /*構造函數*/ function Drag(id){ this.disX = 0;

js拖拽陰影

absolute get turn IV create ech 再次 pen eth css如下 #box{ width: 200px; height: 200px; position: absolute;background-color: red;} .border_b

js拖拽

拖拽 body pub relative 想象 mousedown scl remove 還原 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

原生js拖拽效果

scrip char back width eve top abs box document <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

詳細講解html5拖拽和拖放技術的區別及優勢

提到拖拽，我們都很熟悉，那麼拖放呢？一字之差，代表的意義是不一樣的，拖拽就是拉著走，拖放就是有拖，有放，我們都知道原生 JS 拖拽效果的缺點：1. 程式碼相對複雜與冗餘2. 僅限於在瀏覽器內的元素間拖放3、不能實現跨頁面的拖放所以H5就出現了拖放技術，與 JS 原生相比 HTML5 拖放的優勢

RecycleView裡面的item拖拽和滑動刪除

找到一個寫的很好的： RecyclerView進階：使用ItemTouchHelper實現拖拽和側滑刪除注：滑動刪除的時候，注意不要下標越界： public void onItemDelete(int position) { if (data.size() &g

JS拖拽元素原理及實現程式碼

拖拽功能主要是用在讓使用者做一些自定義的動作，比如拖動排序，彈出框拖動移動等等，效果還是蠻不錯的。下面講解一下拖拽的原理，希望可以幫助到有需要的朋友！一、拖拽的流程動作 ①滑鼠按下 ②滑鼠移動 ③滑鼠鬆開二、拖拽流程中對應的JS事件 ①滑鼠按下會觸發onmousedown事件 obj

JS拖拽div（移動）

#dv { width:100px; height:100px; background-color:blue; border-ra

安卓實現任意控制元件view可拖拽，並監聽拖拽和點選事件，可自動拉回螢幕邊緣

因為專案中有需要實現控制元件可任意拖拽的需求，所以簡單寫了個自定義OnTouchListener，以作拋磚引玉，歡迎大家提議反饋。完整實現類如下，程式碼中有詳細註釋：使用者可以決定是否開啟自動拖拽邊緣功能，可以監聽控制元件的拖拽和點選事件 public cl

html5+js拖拽上傳的那些事

最近搞了個拖拽上傳的專案，以為挺簡單，做了之後發現裡面涉及的東西還是非常多的。這裡隨性的談談其中有意思的地方吧。拖拽事件 -原生拖拽事件 DragEvent上傳是html5的東東，對應的幾個事件有 drag dragend dragenter

簡單封裝一個上傳外掛——支援拖拽和預覽

最近碰到一個需求。需要上傳很多圖片，但是又不是批量上傳。場景是這樣的。我需要從資料表中查出一行一行的資料，每一行都需要更新一個對應的圖片。天才需求方不喜歡批量上傳，因為需要讓他們給每個圖片命名。原生input flie上傳能滿足對方需求，但是不能方便拖拽和預

js拖拽檔案上傳

function uploadFile( fObj ){ var fSize = ( fObj.size / 1024 / 1024 ).toFixed(2), fName = fObj.name, fType = fObj.type;

設定zedgraph滑鼠拖拽和區域性放大屬性轉

設定zedgraph滑鼠拖拽和區域性放大屬性轉設定zedgraph滑鼠拖拽和區域性放大屬性說一下幾個屬性的意義和具體應用: (1)滑鼠拖拽顯示區域 PanModifierKeys ->> Gets or se

Android一步一步帶你實現RecyclerView的拖拽和側滑刪除功能

先上效果圖：本篇文章我們來學習一個開源專案Android-ItemTouchHelper-Demo 這個專案使用了RecyclerView的ItemTouchHelper類實現了Item的拖動和刪除功能，ItemTouchHelper是v7包下的一個類

js拖拽和放置 javascript drag and drop

相關推薦