資訊專欄INFORMATION COLUMN
功能概要：
原生JS實(shí)現(xiàn)圖標(biāo)圖拖拽，拖拽的過(guò)程中不斷輸出該div的left、top值。
用html5的drag來(lái)實(shí)現(xiàn)拖拽有兼容性問(wèn)題，使用拖拽插件代碼又很多，而這個(gè)拖拽demo代碼少，并且兼容所有瀏覽器，很值得在項(xiàng)目中使用，
css樣式： #div1{
width: 100px; height: 100px;
background-color: #4D4D4D;
position: absolute; cursor: pointer;
-webkit-box-shadow: 3px 3px 0px 3px #C7C7C7;
box-shadow: 3px 3px 3px 0px #C7C7C7;
}
#parent{
width: 500px; height: 500px;
border: 1px solid #CDCDCD;
position: relative; margin: 0 auto; //父級(jí)元素設(shè)置為：
background-color: #F4F4F4;
}
.postText{
width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4;
}
.postText span{
padding:0px 10px;
}
html代碼
js代碼及注釋:移動(dòng)的距離Top：Left:
function posMove(getdivid) {
var oDiv = document.getElementById(getdivid);
var oParent = document.getElementById("parent");
var sent = {
l: 10, //設(shè)置div在父元素的活動(dòng)范圍，10相當(dāng)于給父div設(shè)置padding-left：10;
r: oParent.offsetWidth - oDiv.offsetWidth, // offsetWidth:當(dāng)前對(duì)象的寬度， offsetWidth = width+padding+border
t: 10,
b: oParent.offsetHeight - oDiv.offsetHeight,
n: 10
}
drag(oDiv, sent);
}
/**
*
* @param obj:被拖動(dòng)的div
* @param sent :設(shè)置div在容器中可以被拖動(dòng)的區(qū)域
* 原作者的插件下載地址如下: http://www.jq22.com/jquery-info4543
*/
function drag(obj,sent){
var dmW = document.documentElement.clientWidth || document.body.clientWidth;
var dmH = document.documentElement.clientHeight || document.body.clientHeight;
var sent = sent || {};
var l = sent.l || 0;
var r = sent.r || dmW - obj.offsetWidth;
var t = sent.t || 0;
var b = sent.b || dmH - obj.offsetHeight;
var n = sent.n || 10;
obj.onmousedown = function (ev){
var oEvent = ev || event;
var sentX = oEvent.clientX - obj.offsetLeft;
var sentY = oEvent.clientY - obj.offsetTop;
document.onmousemove = function (ev){
var oEvent = ev || event;
var slideLeft = oEvent.clientX - sentX;
var slideTop = oEvent.clientY - sentY;
if(slideLeft <= l){
slideLeft = l;
}
if(slideLeft >= r){
slideLeft = r;
}
if(slideTop <= t){
slideTop = t;
}
if(slideTop >= b){
slideTop = b;
}
obj.style.left = slideLeft + "px";
obj.style.top = slideTop + "px";
document.getElementById("posTop").innerHTML = slideTop;
document.getElementById("posLeft").innerHTML = slideLeft;
};
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
event對(duì)象的clientX,offsetX,screenX,pageX的區(qū)別：
ps： 若有錯(cuò)誤，請(qǐng)指出，謝謝，大家共同學(xué)習(xí)進(jìn)步~~~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111688.html
功能概要： 原生JS實(shí)現(xiàn)圖標(biāo)圖拖拽，拖拽的過(guò)程中不斷輸出該div的left、top值。 用html5的drag來(lái)實(shí)現(xiàn)拖拽有兼容性問(wèn)題，使用拖拽插件代碼又很多，而這個(gè)拖拽demo代碼少，并且兼容所有瀏覽器，很值得在項(xiàng)目中使用， css樣式： #div1{ width: 100px; height: 100px; background-color: #4D4D...
摘要：插件只預(yù)覽該容器下的所有圖片。指定該容器里的圖片點(diǎn)擊預(yù)覽鍵的值就是容器的如果覺(jué)得樣式不滿意什么的，可以直接覆蓋就可以了。預(yù)覽總結(jié)如有疏忽或錯(cuò)誤，希望您及時(shí)指出，我會(huì)盡早修改。有什么需要交流的可在評(píng)論區(qū)與我交流 原生js實(shí)現(xiàn)拖拽縮放預(yù)覽圖片插件 前言 插件功能暫只滿足我司業(yè)務(wù)需求，如果希望有更多的功能，可在下方留言，我盡量擴(kuò)展！如果你有需要或者喜歡的話，可以給我github來(lái)個(gè)star ...
摘要：原文鏈接前端插件庫(kù)站點(diǎn)前端開發(fā)文檔博客前端插件庫(kù)前端插件庫(kù)官網(wǎng)是的函數(shù)庫(kù)，目的是強(qiáng)化表格操作如搜索排序，并自動(dòng)加入組件引入表格中，使用非常靈活簡(jiǎn)便。由推出，靈活扎實(shí)的建議列表函數(shù)庫(kù)。 原文鏈接：前端插件庫(kù)站點(diǎn)：前端開發(fā)文檔博客：前端插件庫(kù) 前端插件庫(kù) DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...
摘要：原文鏈接前端插件庫(kù)站點(diǎn)前端開發(fā)文檔博客前端插件庫(kù)前端插件庫(kù)官網(wǎng)是的函數(shù)庫(kù)，目的是強(qiáng)化表格操作如搜索排序，并自動(dòng)加入組件引入表格中，使用非常靈活簡(jiǎn)便。由推出，靈活扎實(shí)的建議列表函數(shù)庫(kù)。 原文鏈接：前端插件庫(kù)站點(diǎn)：前端開發(fā)文檔博客：前端插件庫(kù) 前端插件庫(kù) DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...
閱讀 3265·2021-11-17 09:33
閱讀 3320·2021-11-15 11:37
閱讀 2980·2021-10-19 11:47
閱讀 3227·2019-08-29 15:32
閱讀 1035·2019-08-29 15:27
閱讀 1553·2019-08-29 13:15
閱讀 958·2019-08-29 12:47
閱讀 2054·2019-08-29 11:30
