功能概要：
原生JS实现图标图拖拽，拖拽的过程中不断输出该div的left、top值。
用html5的drag来实现拖拽有兼容性问题，使用拖拽插件代码又很多，而这个拖拽demo代码少，并且兼容所有浏览器，很值得在项目中使用，
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; //父级元素设置为：
background-color: #F4F4F4;
}
.postText{
width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4;
}
.postText span{
padding:0px 10px;
}
html代码
js代码及注释:移动的距离Top：Left:
function posMove(getdivid) {
var oDiv = document.getElementById(getdivid);
var oParent = document.getElementById("parent");
var sent = {
l: 10, //设置div在父元素的活动范围，10相当于给父div设置padding-left：10;
r: oParent.offsetWidth - oDiv.offsetWidth, // offsetWidth:当前对象的宽度， offsetWidth = width+padding+border
t: 10,
b: oParent.offsetHeight - oDiv.offsetHeight,
n: 10
}
drag(oDiv, sent);
}
/**
*
* @param obj:被拖动的div
* @param sent :设置div在容器中可以被拖动的区域
* 原作者的插件下载地址如下: 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对象的clientX,offsetX,screenX,pageX的区别：
ps： 若有错误，请指出，谢谢，大家共同学习进步~~~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111688.html
功能概要： 原生JS实现图标图拖拽，拖拽的过程中不断输出该div的left、top值。 用html5的drag来实现拖拽有兼容性问题，使用拖拽插件代码又很多，而这个拖拽demo代码少，并且兼容所有浏览器，很值得在项目中使用， css样式： #div1{ width: 100px; height: 100px; background-color: #4D4D...
摘要：原生拖拽拖放事件拖拽拖放事件可以通过拖拽实现数据传递达到良好的交互效果如从操作系统拖拽文件实现文件选择拖拽实现元素布局的修改事件流程一个完整的流程通常包含以下几个步骤设置可拖拽目标设置属性实现元素的可拖拽监听设置拖拽数据为拖拽操作设置反馈图 原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择...
摘要：插件只预览该容器下的所有图片。指定该容器里的图片点击预览键的值就是容器的如果觉得样式不满意什么的，可以直接覆盖就可以了。预览总结如有疏忽或错误，希望您及时指出，我会尽早修改。有什么需要交流的可在评论区与我交流 原生js实现拖拽缩放预览图片插件 前言 插件功能暂只满足我司业务需求，如果希望有更多的功能，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star ...
阅读 2944·2021-11-17 09:33
阅读 3064·2021-11-15 11:37
阅读 2780·2021-10-19 11:47
阅读 3050·2019-08-29 15:32
阅读 817·2019-08-29 15:27
阅读 1383·2019-08-29 13:15
阅读 787·2019-08-29 12:47
阅读 1904·2019-08-29 11:30
