拖拽 | 乐趣区

关于拖拽:拖拽插件sortablejs之eltable表格拖拽效果代码

问题形容Sortable.js是一款优良的js拖拽库，因为是原生js写的，所以性能不错，也反对挪动端哦。本文举两个案例来学习一下。案例一简略拖拽效果图代码附上对于了解看正文哦，运行的话复制粘贴即可 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>sortable.js拖动例子</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">  <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script> <style> #wrapBox { width: 360px; /* 拖动容器的高度，由拖动项的高度撑开 */ height: auto; } #wrapBox div { padding: 8px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; /* 增加鼠标悬浮款式为挪动的款式，要不然不难看 */ cursor: move; font-size: 13px; } /* 设置鼠标按下时候的款式，加了难看些 */ #wrapBox div:active { background-color: #eee; } </style></head><body> <h2>优先扣款程序：</h2>  <div id="wrapBox"> <div data-id="1工商银行">工商银行</div> <div data-id="2建设银行">建设银行</div> <div data-id="3中国银行">中国银行</div> <div data-id="4农业银行">农业银行</div> <div data-id="5交通银行">交通银行</div> </div> <script> //第一步，获取拖动容器 var wrap = document.getElementById('wrapBox'); //第二步，设置拖动项的拖动规定 var rules = { animation: 500, // 拖动时的元素的地位变动的动画时长， //拖动完结后的回调函数 onEnd: function (event) { console.log('参数是拖动事件对象', event); //获取拖动后容器中的每一项的地位排序 var arr = sortable.toArray(); console.log('地位排序', arr); }, }; //第三步，初始化 --> 给拖动容器增加拖动规定 var sortable = Sortable.create(wrap, rules); /** * 插件自带的办法： * 1. sortable.toArray() 获取序列化后的每个item元素的id属性的数组 * 2. Sortable.create(wrap, rules) 给拖动容器增加拖动规定 * */ </script></body></html>案例二 el-table表格拖拽这里有一个细节，就是表头数据拖动的时候，可能导致渲染数据不对的问题，有的博主是搞两个表头数组数据的，其实也是一种解决问题的计划。不过集体愚见略有麻烦，其实一个表头数组数据即可。只有及时清空，从新赋值即可 ...

前端面试每日-31-第157天

今天的知识点 (2019.09.20) —— 第157天[html] 你有用过bdo标签吗？举例说明它的作用是什么？[css] 外边距重叠是什么？重叠的结果是什么？怎么防止外边距重叠？[js] 举例说明js拖拽用到的事件有哪些？[软技能] 说说你们的项目上线流程是怎样的？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！欢迎在 Issues 和朋友们一同讨论学习！项目地址：前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注前端剑解公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star] https://github.com/haizlin/fe...

HTML5原生拖放事件的学习与实践

前言之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。????阅读更多系列文章 / 阅读原文????拖放事件介绍由名字可以看出来，拖放事件由2部分组成：拖动和释放。而拖动又由2部分组成，分别是被拖动元素的相关事件和元素容器的相关事件。1、被拖动元素的相关事件：事件名称说明dragstart在元素开始被拖动时候触发drag在元素被拖动时反复触发dragend在拖动操作完成时触发2、容器的相关事件：事件名称说明dragenter当被拖动元素进入目的地元素所占据的屏幕空间时触发，一般需要取消浏览器的默认行为。dragover当被拖动元素在目的地元素内时触发，一般需要取消浏览器的默认行为。dragleave当被拖动元素没有放下就离开目的地元素时触发3、释放事件：事件名称说明drop当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。效果展示为了方便说明，先看代码实现的效果。请前往 Github仓库下载 demo.html 和 demo.js 到本地，然后用Chrome打开html文件，初始效果如下图：将图中的可拖拽元素，拖放到下面的容器中，这个过程的效果如下所示。箭头表示拖拽方向，方框代表动态改变的容器样式。最后，松开鼠标，将元素放入到下面的容器中，整个过程完成。代码实现首先，先编写html代码。因为元素可以在两个容器之间任意拖动，因此这两个容器都需要监听drapenter、dragover、dragleave、drop这四个事件。被拖拽元素的 draggable 属性需要指明为 true ，才可以被拖拽。同时为了记录一些信息，需要监听dragstart事件。<body> <script src="./demo.js"></script> <div class=“container” ondragenter=“onDragEnter(event)” ondragover=“onDragOver(event)” ondragleave=“onDragLeave(event)” ondrop=“onDrop(event)” > <div id=“target” draggable=“true” ondragstart=“onDragStart(event)"> 被拖拽元素 </div> </div> <div class=“container” ondragenter=“onDragEnter(event)” ondragover=“onDragOver(event)” ondragleave=“onDragLeave(event)” ondrop=“onDrop(event)” ></div></body>为了让拖拽效果更明显，实现效果展示->第二部分的，拖拽元素进入一个新的容器的时候，新容器展示阴影效果。编写阴影效果样式：<style> .container { width: 200px; height: 200px; padding: 10px; border: 1px solid #aaaaaa; margin-bottom: 10px; transition: box-shadow .3s ease; } #target { width: 50px; height: 50px; border: 1px solid black; margin: 0 auto; } .container.active { border-bottom-width: 0; box-shadow: 0 10px 6px -6px #777; }</style>最后，编写 demo.js 代码。具体逻辑请看代码中的注释信息：let target = null, container = null// 寻找拖拽元素的容器类function findParentContainer(node) { if(!node || node === document) { return null } if(node.classList.contains(‘container’)) { return node } return findParentContainer(node.parentNode)}// 元素开始被拖拽时, 标记元素原生的容器类function onDragStart(event) { target = event.target container = findParentContainer(target)}// 元素进入目的容器时, 如果不是原来的容器, 则可以放置// 此时更改样式, 以更好向用户展示function onDragEnter(event) { event.preventDefault() if(event.target !== container) { event.target.classList.add(‘active’) }}// 元素在目的容器内时触发function onDragOver(event) { event.preventDefault()}// 元素离开目的容器, 需要移除相关样式function onDragLeave(event) { event.preventDefault() event.target.classList.remove(‘active’)}// 元素被放置在目的容器, 添加DOM节点, 移除相关样式function onDrop(event) { event.preventDefault() event.target.appendChild(target) event.target.classList.remove(‘active’) target = null container = null}参考链接代码地址: Github 《HTML5拖放》《HTML5原生拖拽/拖放》更多系列文章⭐在GitHub上收藏/订阅⭐《前端知识体系》JavaScript基础知识梳理(上)JavaScript基础知识梳理(下)ES6重难点整理谈谈promise/async/await的执行顺序与V8引擎的BUG前端面试中常考的源码实现Flex上手与实战……《设计模式手册》单例模式策略模式代理模式迭代器模式订阅-发布模式桥接模式备忘录模式模板模式抽象工厂模式……《Webpack4渐进式教程》webpack4 系列教程(二): 编译 ES6webpack4 系列教程(三): 多页面解决方案–提取公共代码webpack4 系列教程(四): 单页面解决方案–代码分割和懒加载webpack4 系列教程(五): 处理 CSSwebpack4 系列教程(八): JS Tree Shakingwebpack4 系列教程(十二)：处理第三方 JavaScript 库webpack4 系列教程(十五)：开发模式与 webpack-dev-server……⭐在GitHub上收藏/订阅⭐ ...

关于pixi拖拽事件与传参等常见问题

pixi常用事件类型首先汇总下pixi中的所有事件:pointer事件(鼠标和touch)mouse事件(鼠标)tap事件(touch)pixi拖拽demo最近写了个pixi简单的拖拽demo：<!– * @Descripttion: * @Author: * @Date: 2019-04-04 11:47:42 –><template> <div></div></template><script>export default { name: “testline”, data() { return {} }, mounted() { let PIXI = this.PIXI; const _this = this; // 创建应用 let app = new PIXI.Application(); app.renderer.view.style.position = “absolute”; app.renderer.view.style.display = “block”; app.renderer.autoResize = true; app.renderer.resize(window.innerWidth, window.innerHeight); document.body.appendChild(app.view) // 加载图片 let textureUrl = “/testTexture/textures.json”, heartId = “heart.png”; PIXI.loader .add(textureUrl) .load(setup); function setup() { // 相当于把这个加载拆分出一个方法 // new PIXI.Sprite(PIXI.loader.resources[textureUrl].textures[backgroundId]) let id = PIXI.loader.resources[textureUrl].textures let heart = new PIXI.Sprite(id[heartId]) heart.anchor.set(0.5); heart.position.set( window.innerWidth / 2, window.innerHeight / 2 ); // 加入舞台中 app.stage.addChild(heart); // 开启交互 heart.interactive = true; heart.buttonMode = true; console.log(this) // 拖拽事件 heart .on(‘pointerdown’, _this.onDragStart) .on(‘pointerup’, _this.onDragEnd) .on(‘pointerupoutside’, _this.onDragEnd) .on(‘pointermove’, _this.onDragMove) } }, created() {}, methods: { onDragStart(event) { let currentTarget = event.currentTarget; currentTarget.data = event.data currentTarget.alpha = 0.5; currentTarget.dragging = true; }, onDragEnd(event) { let currentTarget = event.currentTarget; currentTarget.alpha = 1; currentTarget.dragging = false; }, onDragMove(event) { let currentTarget = event.currentTarget; if (currentTarget.dragging) { var newPosition = currentTarget.data.getLocalPosition(currentTarget.parent); //获取鼠标移动的位置 currentTarget.position.x = newPosition.x; currentTarget.position.y = newPosition.y; } } }}</script><style></style>pixi事件中注意点：1. 关于事件调用与传参问题：// 没有参数.on(“pointerdown”, _this.onDragStart) // 正确.on(“pointerdown”, _this.onDragStart()) //错误：会直接执行函数// 需要传参.on(“pointerup”, _this.buttonSubmit.bind(_this, { params: “aaa” }));.on(“pointerup”, (event) => { _this.buttonSubmit(“aaa”,event)});// 需要传递回调函数.on(“pointerup”,_this.buttonSubmit.bind(_this, { params: “aaa”, callback: target => { doSomethis(target); // 接受当前事件绑定对象，方便doSomethis中使用 } }) );// 在事件中可以通过下面方式拿到databuttonSubmit(data, event) { if (data.callback) data.callback(event.currentTarget)}2. 区别vue的this和pixi的this如果把绑定的事件写到mounted中，那么这个事件中的this就是pixi的对象（sprite），但是把事件写到methods中，这个时候的this就是vue本身，一定要区别开。3. 通过event.currentTarget得到pixi对象在methods中的事件中直接拿this，打印出的是VueComponent，而不是我们想要的pixi对象，这个时候，你设置this的透明度、大小之类的肯定都会报错。解决办法是我们可以通过event.currentTarget拿到事件的绑定对象，打印currentTarget会发现他就是我们需要的pixi对象Sprite，通过它来实现事件触发后的一些效果就可以了。要留意的是，直接在控制台打印event，会看见它的currentTarget是null，但是打印event。currentTarget是有东西的，查了资料发现原来是因为：currentTarget 在你控制台展开查看的时候，已经不存在了。你要是想拿到它，需要将它赋值给一个值，然后再进行操作。可以参考：https://stackoverflow.com/que…可交互对象属性设置交互之前，一定要把设置对象的interactive和buttonMode属性为true。 ...