在没有drag事件的时候,做元素拖拽使用的都是mouse事件,但mouse在处理过程中可能有这样或那样的问题,主要还是感觉不流畅,如果小伙伴们不在考虑低版本IE(<IE9)的话,可以偿试一下drag,会有意想不到的收获。。
下面来展示下drap的主要事件
在拖动目标上触发事件 (源元素):
释放目标时触发的事件:
dataTransfer对象(了解就行了):
演示效果
html:
<div class="box">
<ul>
<li id="li1" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题一</li>
<li id="li2" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题二</li>
<li id="li3" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题三</li>
<li id="li4" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题四</li>
<li id="li5" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题五</li>
</ul>
</div>
<div class="box">
<ul ondrop="drop(event)" ondragenter="dragenter(event)" ondragover="dragover(event)" ondragleave="dragleave(event)">
</ul>
</div>
JS:
<script>
var $ = document.querySelectorAll.bind(document);
// 开始拖拽元素
function dragstart(e) {
e.dataTransfer.setData('li',e.target.id);
console.log('%c 1、开始拖拽(dragstart)', 'color: green;')
}
// 拖拽元素进入目标窗器
function dragenter(e) {
console.log('%c 2、拖拽元素进入目标窗器(dragenter)', 'color: orange;')
}
// 拖拽元素悬浮目标窗器上
function dragover(e) {
e.preventDefault();
$('.box')[1].style.border = '1px dashed red';
console.log('%c 3、拖拽元素悬浮目标窗器上(dragover)', 'color: red;')
}
// 拖拽元素离开目标窗器
function dragleave(e) {
$('.box')[1].style.border = 'none';
console.log('%c 4、拖拽元素离开目标窗器(dragleave)', 'color: black;')
}
// 放下拖拽元素
function drop(e) {
e.preventDefault();
var li = e.dataTransfer.getData('li');
if(e.target.nodeName === 'UL') {
e.target.appendChild(document.getElementById(li));
} else {
liNode = document.getElementById(li);
e.target.parentNode.insertBefore(liNode, e.target);
}
$('.box')[1].style.border = 'none';
console.log('%c 5、放下拖拽元素(drop)', 'color: blue;')
}
// 完成拖拽
function dragend(e) {
console.log('%c 6、完成拖拽(dragend)', 'color: gray;')
}
</script>
在dragover和drop环节上阻止默认事件(e.preventDefault())是少不了的,,不信的少侠可以尝试一下,以来印证老夫所言非虚。。。哈哈哈,偏偏然,隐身山林中……
控制台打印
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动</title>
<script src="jquery.min.js"></script>
<script>
var log = console.log.bind(console);
</script>
</head>
<body>
<style>
*{margin: 0;padding: 0;list-style: none;}
.list li{float: left;height: 36px;padding: 0 10px;margin: 10px 0 0 10px;border: 1px solid #ddd;line-height: 36px;}
.list .active{border-color: green;color: green;}
.list .dashed{display: none;border-style: dashed;}
.list .num{margin-right: 5px;}
</style>
<ul class="list">
<li class="dashed" ondrop="drop(event)" >="0"></li>
<li class="active" draggable="true" >="1"><span class="num">1</span><label><input type="checkbox" checked="checked">天天向上1</label></li>
<li class="active" draggable="true" >="2"><span class="num">2</span><label><input type="checkbox" checked="checked">天天向上22</label></li>
<li class="active" draggable="true" >="3"><span class="num">3</span><label><input type="checkbox" checked="checked">天天向上333</label></li>
<li >="4"><span class="num">4</span><label><input type="checkbox">天天向上4444</label></li>
<li >="5"><span class="num">5</span><label><input type="checkbox">天天向上55555</label></li>
<li class="active" draggable="true" >="6"><span class="num">6</span><label><input type="checkbox" checked="checked">天天向上666666</label></li>
<li >="7"><span class="num">7</span><label><input type="checkbox">天天向上7777777</label></li>
<li >="8"><span class="num">8</span><label><input type="checkbox">天天向上88888888</label></li>
<li >="9"><span class="num">9</span><label><input type="checkbox">天天向上999999999</label></li>
</ul>
<script>
var dragEleWth; // 拖动元素宽度
$('.list li').click(function(e) { // 勾选
e.preventDefault();
if($(this).hasClass('active')) {
$(this).removeClass('active').removeAttr('draggable').find(':checkbox').prop('checked', false);
} else {
$(this).addClass('active').attr('draggable', true).find(':checkbox').prop('checked', true);
}
}).on('dragstart', function(e) { // 拖动元素
dragEleWth = $(this).width();
e.originalEvent.dataTransfer.setData('order', +$(this).data('order'));
}).on('dragover', function(e) { // 拖动悬浮
e.preventDefault();
if($(this).hasClass('active')) {
$('.list .dashed').show().width(dragEleWth);
$(this).before($('.list .dashed'));
}
});
// 放下
function drop(e) {
e.preventDefault();
var order = e.dataTransfer.getData('order');
var dashedLi = $('.list .dashed');
dashedLi.before($('[token operator">+order+'"]'));
dashedLi.hide().removeAttr('style');
$('.list').prepend(dashedLi);
$('.list li').each(function(i) {
$(this).attr('>, i).children('.num').text(i);
});
}
</script>
</body>
</html>
拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改。原生Js实现元素拖拽、图片到指定区域进行预览的方法实现
当我们需要对Dom元素进行底层操作的时候,这时候我们就需要使用vue的自定义指令。这篇文章将讲解:如何注册Vue自定义指令?Vue的钩子函数,vue钩子函数参数,vue实现拖拽功能,实现图片加载功能,Vue自定义指令集成第三方插件 ...
移动端的拖拽有两种主流的实现方案:1. 将元素设置为固定定位,然后在拖拽的时候修改其定位,实现拖拽的效果;2. 使用 transform 中的平移 translate 属性实现拖拽。
正巧在之前面试中遇到问实现拖拽效果。当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事,把这个东西实现了一下。原理很简单,写的很方便。
如果要设置物体拖拽,必须使用三个事件,分别是:1、onmousedown:鼠标按下事件2、onmousemove:鼠标移动事件3、onmouseup:鼠标抬开事件
如何拖拽图片到指定位置,具体方法如下,在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码
ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;ng-drop:是否允许放入拖拽元素
拖放是一种非常流行的用户界面模式。它的概念很简单:点击某个对象,并按住鼠标按钮不放,将鼠标移到到另一个区域,然后释放按钮将对象放到这里。
最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下
运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便;实现方式:template部分、script部分
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!