sortable实现拖动排序

html部分

<div class="padding-20 fenxiang_gou margin-bottom-40" style="background: #f5f5f5;" id="pageVue"><div class="padding-40 bg-white padding-left-80 flex-def"><div class="phone-box"><div class="phone-box-header"></div><div class="postAll"><div class="poster"><div class="poster-head"><img :src="goods_img==''?erweima_bg:goods_img"><div class="poster-code flex-zCenter flex-def flex-cCenter draggable"  id="fenxiang_ewm"><img src="./images/erweima.png" alt=""></div></div></div></div><div class="clear_btn margin-top-20"><button class="btn td-btn" onclick="clear_click()">重置</button><button class="btn td-btn" onclick="save()">保存</button></div></div></div></div>

css部分

.draggable{cursor:move}.flex-def {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}/* 主轴居中 */.flex-zCenter {-webkit-box-pack: center;-moz-justify-content: center;-webkit-justify-content: center;justify-content: center;}/* 主轴居中 */.flex-cCenter {-webkit-box-align: center;-moz-align-items: center;-webkit-align-items: center;align-items: center;}.flex-one {-prefix-box-flex: 1;-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;}.fenxiang_gou .phone-box .phone-box-header {height: 63px;width: 375px;background-image: url(./images/phone_box_header.jpg);background-size: 100% 100%;background-repeat: no-repeat;}.fenxiang_gou .poster-head {position: relative;min-height: 600px;width: 375px;}.fenxiang_gou .poster-head>img {width: 100%;height: auto;}.fenxiang_gou .poster-code {background: #fff;width: 120px;height: 120px;border-radius: 8px;position: absolute;top: 458px;left: 234px;}.fenxiang_gou .poster-code img {widows: 110px;height: 110px;}.fenxiang_gou .clear_btn {width: 375px;text-align: center;}.fenxiang_gou .clear_btn>button {border: 1px solid #00a5e7;width: 70px;padding: 2px 10px;}

js部分
引入sortable插件

<script type="text/javascript">$(function(){$(".draggable").draggable({ containment: '.poster-head', scroll: false });//容器拖动})var vm = new Vue({el: '#pageVue',data: {erweima_bg:'./images/erweima_bg.png',goods_img: '',},created: function () {var that = this},methods: {goods_img_del:function(){   //商品大图删除var that=this;that.goods_img='';},},});// 重置按钮function clear_click(){var that=vm;that.goods_img='';$("#fenxiang_ewm").css({"top":"458px","left":"234px"})}// 保存function save(){var ewm=$("#fenxiang_ewm")[0]console.log(ewm.offsetTop+":"+ewm.offsetLeft);  // 二维码的位置}</script>

注意:样式有点乱，主要看事件的实现！仅个人记录一下

sortable实现拖动排序相关推荐

jQuery UI sortable()实现拖动排序
Query UI的强大不用多说,今天来看下它的拖动排序功能,jQuery UI使用sortable()实现对元素拖动排序,首先来看下面这个简单的例子: <!DOCTYPE html> &l ...
jquery的sortable拖拽排序插件，顺序没发生改变则不请求
一.前言前几天刚做完排序,本来以为没什么问题的,结果今天被告知要优化一下..功能上是没问题,但是有一些小细节需要优化.比如我做的是每次拖拽完成之后,都在stop方法里面请求ajax保存顺序.但是要考 ...
jquery sortable的拖动方法内容说明和示例详解（转载http://www.jb51.net/article/45803.htm）
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 u ...
jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
element-ui 树形表格懒加载手风琴模式拖动排序
手风琴模式实现的效果: 其中一个节点展开时,其他节点关闭,一直保持最多只有一个节点是展开的. 需要解决的问题: element-ui 树形懒加载表格自带的节点展开时,默认只有第一次才会触发load函 ...
【Android 事件分发】ItemTouchHelper 实现拖动排序
Android 事件分发系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...
android 二级列表拖动排序_Excel的数据透视表六种排序方法
Excel的数据透视表排序不像表格中那样操作灵活,很多小伙伴对此不熟悉,本文系统讲解数据透视表的各种排序. 一.常规排序二.组内排序三.多关键字排序四.手动拖动排序五.手动输入排序六.设置透 ...
【Axure教程】拖动排序——扣款顺序
随着移动支付的发展,移动支付的途径和方式也越来越多,常见的有钱包余额支付.支付宝支付.微信支付.银行卡支付--随着绑定的账户越来越多,我们需要一个设置扣款顺序的功能页面. 所以今天作者就教大家如果做一 ...
Android拖动实现（一个流畅的拖动排序DragSortGridView,自动滚屏）
https://github.com/huxq17/HandyGridView 先上效果流畅效果超越了网易新闻和UC浏览器的栏目收藏.gif图和实际效果有差距 1.拖拽可以移动item,并且其他it ...

sortable实现拖动排序

sortable实现拖动排序相关推荐

最新文章

热门文章