draggable与overflow同时存在,无法拖拽出父元素问题解决

   在使用jquery-ui的拖拽功能对列表内的选项拖拽时,发现无法将选项拖拽出列表的范围,一出范围就自动隐藏在列表下,查找到最后的原因是css中的overflow的原因,overflow存在则不能将选项拖拽出列表,
解决办法

$(‘ul li‘).draggable({
                zIndex:999,//zIndex主要是让选项在上层显示出来
                helper:‘clone‘,
                revert:‘invalid‘,
                appendTo:‘body‘//加上这句就可以将选项拖拽出来
        });     

以上仅作总结。

时间: 2024-11-09 03:44:52

draggable与overflow同时存在,无法拖拽出父元素问题解决的相关文章

position定位解决弹框拖拽出屏幕的情况

position定位有四种情况: 1 static默认情况,没有定位,元素正常出现在文档流中. 2 fixed 绝对定位 元素的位置相对于浏览器窗口是固定位置. 即使窗口是滚动的它也不会移动:定位脱离文档流,不占据位置. 3 relative相对定位,相对其正常位置,还在文档流中,占据位置. 相对定位元素经常被用来作为绝对定位元素的容器块. 4 absolute绝对定位 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html> 定位脱离文档流,不

在使用ActionChains类,在执行一次拖拽后再拖拽,还会重复拖拽上一个元素

背景: 在项目的实际使用中,要对多个元素进行拖拽到指定区域,并且这些元素还分属于不同的类型中.在拖拽完第一个元素之后,再去拖拽其它元素,会发现又会拖拽一次第一个元素. 历程: 1.网上搜索一番,没有得到答案: 2.翻阅ActionChains的源代码,发现它是将所有action存储在一个_actions的变量中.然后在perform方法中去执行这个数组中存储的所有action.代码如下: def perform(self): """ Performs all stored a

关于jqGrid使用二级表头拖拽导致表头错位问题解决

在使用jqGrid时会出现如下问题 经过查看样式不难发现是由于设置了二级表头增加了如下这样一个表单行造成其表头错位的问题 经过对比表头宽度跟表体宽度对比分析 发现拖动后 他们两者之间的宽度相差12px ,为此我们可以修改其js源码 这样就能解决在拖拽时错位的问题 原文地址:https://www.cnblogs.com/chenlongsheng/p/11750577.html

JQUERY 拖拽 draggable droppable resizable selectable sortable

今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src="

原生拖拽,拖放事件(drag and drop)

原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事件流程 一个完整的drag and drop流程通常包含以下几个步骤: 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽. 监听dragstart设置拖拽数据 为拖拽操作设置反馈图标(可选) 设置允许的拖放效果,如copy,move,link 设置拖放目标,默认情况

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty

一步一步实现JS拖拽插件

js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup.所以拖拽的基本思路就是: 1.用鼠标点击被拖拽的元素触发onmousedown (1)设置当前元素的可拖拽为true,表示可以拖拽 (2)记录当前鼠标的坐标x,y

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge