draggable

vue和H5 draggable实现拖拽并替换效果

前言 公司项目需要做拖拽替换效果,本人用的vue框架。在网上找了很多资料都是用的 Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果,我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。 JQ有实现拖拽的插件,我下载过一个插件并看过源码,大致原理是给目标元素设置定位属性,通过监听鼠标mousedown,mouseup事件,再计算鼠... »

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动。 其实我之前基于 Sortable 做过一个类似的效果。也给他看过了,没看太明白,他就自己基于 vuedraggable 实现了一下。 正好有点问题给他解决了一下。废话不多说,先上最终效果:Vue 拖拽排序效果 测试地址。下面就是最终效果图。 效果一:实现选中 和 全选效果 就下面这样... »

Vue使用vue-draggable 插件在不同列表之间拖拽功能

今天分享一个vue项目中在不同列表拖拽设置选项的功能,这个功能也是在做项目中遇到的,先说下这个功能的要点(参考下图),有2个列表,左侧列表展示已选,右侧列表展示未选,通过拖拽进行设置,已选的选项不能超过4个,超过的话自动将拖拽之前的最后一项清除到右侧,且如果从已选往未选里拖的时候,右侧显示垃圾桶的提示(如图)。 拖拽功能图片: 垃圾桶显示图: 首先讲讲vue-draggable的使用 安装vue-... »

基于vue-draggable 实现三级拖动排序效果

基于vue-draggable 实现三级拖动排序效果

vue-draggable 之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。 废话少说直接上代码 先看数据结构,和页面的呈现,等会再来上代码。 这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的 我们现... »

谈谈对JavaScript原生拖放的深入理解

拖动拖放源时,依次触发dragstart、drag和dragend这3个事件dragstart按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发dragstart事件。只要在dragover和dragenter事件中阻止默认行为,才能成为被允许的放置目标,才能允许发生drop事件。 »

jQuery实现可拖拽的许愿墙效果【附demo源码下载】

本文实例讲述了jQuery实现可拖拽的许愿墙效果。分享给大家供大家参考,具体如下: 运行效果图如下: 这里简单介绍下功能点: ① 随机显示背景图或背景色 ② 出现的位置随机 ③ 可以通过拖拽改变位置 好了,附上代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <... »

详解js中构造流程图的核心技术JsPlumb

项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下。 一、效果图展示 1、从左边拖动元素到中间区域,然后连线 2、连线类型可以自定义:这里定义为直线、折线、曲线。实际项目中根据业务我们定义为分装线、分装支线、总装线等 3、鼠标拖动区域选中元素,并且选中元素统一拖动位置。 4、对选中的元素左对齐。 5、对... »

轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车

在本文中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面,购物篮中的物品和价格将更新,分享给大家,具体内容如下: 效果图: 具体代码如下 显示页面上的商品: <ul class="products"> <li> <a href="#" class="item"> <img src="images/shirt1.gif"/> &... »

轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置。 首先,我们创建三个<div> 元素: <div id="dd1" class="dd-demo"></div> <div id="dd2" class="dd-demo"></div> <div id="dd3" class... »

使用 bootstrap modal遇到的问题小结

使用 bootstrap modal遇到的问题小结

bootstrap提供了一个写好的css文件和js文件然而在使用时遇到了一下并不是很好的问题,今天在使用弹出对话框时遇到了一个这样的问题 上述代码 <a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="true" >点击"无ESC关闭,无遮蔽背景"演示</a&... »

easyui Droppable组件实现放置特效

所谓放置,就是将一个物体放入一个物体内,当然对于easyui来说触发各种效果是必不可少的,同时这个组件也不会依赖于其他组件。   Droppable的加载方式   1,class  加载   一直不太喜欢class方式的加载  浪费一个位置,代码一多还看着乱七八糟的。 复制代码 代码如下:<div id=’dd’ class=&... »

easyui Draggable组件实现拖动效果

easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间。 Draggable的加载方式有两种: 1,通过class加载,如下: <div id="box" class="easyui-draggable"></div> 通过JS加载,如下: $('#box').draggable(); 以上两点需要注意的是不管是’eas... »

基于vue-draggable 实现三级拖动排序效果

基于vue-draggable 实现三级拖动排序效果

vue-draggable 之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。 废话少说直接上代码 先看数据结构,和页面的呈现,等会再来上代码。 这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的 我们现... »

使用vue如何构建一个自动建站项目

使用vue如何构建一个自动建站项目

写在前面 之前一直用Jquery+Jquery-ui来做这个项目,那个时候没有设计稿,没有项目需求,就因为BOSS一句话,要做这样的东西,当时就…好吧!我承认,其实已经习惯了,无所谓了(也是无奈,哎)!!! 在之后的一段时间里,做了一个demo出来,BOSS很满意了,所以自己接下来就慢慢做吧,差不多两三个月吧,就闷头做这个,后来项目上线了,当然因为产品的不完善,还是有点问题了! 不过基... »

详解为Bootstrap Modal添加拖拽的方法

网上有许多给Bootstrap Modal添加拖拽实现,但是许多代码看起来都比较复杂感觉封装性可能也不太好,有的甚至使用了jquery ui的拖拽功能,这些都不是我想要的,其实我在给Bootstrap Modal添加拖拽功能的事情已经是2017年春节的时候了,弹指一挥间一年就过去了。2017年春节的时候,由于之前项目有同事使用layer来做前端,但是对于我这种略懂js前端的后端开发来说,让我引入l... »

JS实现的简单拖拽购物车功能示例【附源码下载】

JS实现的简单拖拽购物车功能示例【附源码下载】

本文实例讲述了JS实现的简单拖拽购物车功能。分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8" /> <title>使用拖放API将商品拖入购物车</title> <style> body { font-size:12px } .liT{ border-bottom:sol... »

vue拖拽排序插件vuedraggable使用方法详解

大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggab... »

jQuery EasyUI API 中文文档 – Draggable 可拖拽

用$.fn.draggable.defaults重写默认的defaults。 用法 代码如下: <div id=”dd” style=”width:100px;height:100px;”> <div id=”title” style=”background:#ccc;”>tit... »

jQuery UI Draggable + Sortable 结合使用(实例讲解)

工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了,Demo截图:从左边控件拖到右边区域代码段:Html 代码: left-test1 ... »

Draggable Elements 元素拖拽功能实现代码

val.Y : this.Y; return newPos; } return newPos; }, bound : function , check : function() , apply : function var cursorStartPos, elementStartPos, dragging = false, listening = false, disposed = false;... »

深究AngularJS中ng-drag、ng-drop的用法

1.相关地址: 插件下载:https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.js 2.讲解 <div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content"> &l... »

Jquey拖拽控件Draggable使用方法(asp.net环境)

本例主要目的是使用Jquey的Draggable控件。使用时首先依次引用Jquery,Jquery-Ui ,Draggable三个Js。然后在js中编写相应的代码,相关代码说明请看程序中的注释。 »

详解有关easyUI的拖动操作中droppable,draggable用法例子

这个demo展示的效果为:从上面可以拖动到下面相应的框中(原有的不能再拖动),拖动框中的东西到外面可以取消 ———–以下为HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati... »

Javascript的一种模块模式

Douglas Crockford已经传授了一个有用的单例模式(singleton pattern)实现此规则,我认为他的模式有益于你基于YUI的那些应用。Douglas叫它模块模式(module pattern)。它是如下工作的: 1、创建一个命名空间对象:如果你使用YUI,可以用YAHOO.namespace()方法: YAHOO.namespace(“myProject̶... »

基于JavaScript 实现拖放功能

HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能。draggable dropzone 这是我们的第一段代码,子元素现在还 不能 拖动。DataTransferDataTransfer 接口中保存了与当前拖放过程相关的跟踪信息,信息从 DataTransfer 对象属性中获得,而 DataTransfer 对象又是从 DOM 事件对象中获得的。d... »

Page 1 of 3123