draggable

jquery draggable get its content JS fired twice

由 梦想的初衷 提交于 2020-02-05 13:07:47
问题 I noticed the first time you drag it around and then cancel the dragging, the js in the dragged item will fire another time, after that, everything seems normal, any idea? 回答1: I found the answer on the jquery ui forum! update is firing twice because 2 lists are being update (the original, and the list it moves to). so, you can either you the receive: option or in your update you can add: this check: if (this === ui.item.parent()[0]) { //do your stuff here } here's the thread on the jquery

js插件类库组织与管理

由 给你一囗甜甜゛ 提交于 2020-01-27 04:54:38
testjs 插件类库组织与管理 在开发一个较大规模的网站， js 插件类库应用的是相当多。那么自然在一个页面里就存在不少 script 和 script 相关的 link 标记，这样 js 组织与管理自然成了一大问题。 先举个例子，比如 jquery 插件中的 calendar 在一个页面中就得有如下代码 < style type ="text/css"> @import " "script/calendar/ jquery.datepick.css"; </ style > < script type ="text/javascript" src ="script/jquery1.3.2.js"></ script > < script type ="text/javascript" src =""script/calendar/jquery.datepick.js"></ script > < script type ="text/javascript" src =""script/calendar/jquery.datepick-zh-CN.js"></ script > 看上面代码 ,calendar 代码得运用四个相关的文件。其中 jquery1.3.2.js 是必须的， jquery.datepick-zh-CN.js 依赖于 jquery.datepick.js

jquery draggable: how to limit the draggable area?

由 拜拜、爱过 提交于 2020-01-26 23:54:26
问题 I have a draggable object (div), and some droppable ones (table TD's). I want the user to drag my draggable object to one of those droppable TD's. I enable draggable and droppable this way: $(".draggable").draggable(); $(".droppable").droppable(); The problem is that with this the user can drag the div anywhere on the screen, including out of the droppable area. How can I limit the boundary area for the draggable object? 回答1: Use the "containment" option: jQuery UI API - Draggable Widget -

html5新特性拖放（拖拽）

由 不羁岁月 提交于 2020-01-25 20:55:35
html5新特性拖放（拖拽） 定义 抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。 拖放的流程对应的事件 选中 ---> 拖动 ---> 释放 选中 在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。 文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。 图片和链接按住鼠标左键选中，就可以拖放。 文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。 draggable属性：设置元素是否可拖动。 语法： 1.true: 可以拖动 2.false: 禁止拖动 3.auto: 跟随浏览器定义是否可以拖动 拖动 针对对象 事件 说明 拖动的元素 dragstart 在元素开始被拖动时候触发 drag 在元素被拖动时反复触发 dragend 在拖动操作完成时触发 目的地对象 dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发 dragover 当被拖动元素在目的地元素内时触发 dragleave 当被拖动元素没有放下就离开目的地元素时触发 drop 当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。 dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e

Scroll a div based on a draggable element

由 自古美人都是妖i 提交于 2020-01-25 05:20:09
问题 Here's basically what I want: I want to scroll up and down a div which contains a very long content by using another element binded with jquery draggable. <div id="wrapper"> <div id="container"> <div id="timeline_wrapper"> <div id="timeline"> </div> </div> <div style="clear:both"></div> <div id="horizontal_control"> <div id="controller"></div> <div> </div> $("#controller").draggable({ revert: false, containment: "parent", axis: "x", create: function(){ $(this).data("startLeft",parseInt($(this

On JQuery UI do one draggable connectToSortable multiple sortables

由 ε祈祈猫儿з 提交于 2020-01-24 21:51:27
问题 In JQuery UI, I have a draggable, It have an option connectToSortable as below: $("#social li").draggable({ connectToSortable: '#form_builder_sortable', helper:'clone', revert:true }); '#form_builder_sortable' is a sortable as below: $("#form_builder_sortable").sortable(); I want 1 draggable list connect to multiple sortable list, such as: $("#social li").draggable( { connectToSortable: '#form_builder_sortable, #form_builder_sortable_sample', helper:'clone', revert:true }); Have you got any

On JQuery UI do one draggable connectToSortable multiple sortables

由 三世轮回 提交于 2020-01-24 21:51:03
问题 In JQuery UI, I have a draggable, It have an option connectToSortable as below: $("#social li").draggable({ connectToSortable: '#form_builder_sortable', helper:'clone', revert:true }); '#form_builder_sortable' is a sortable as below: $("#form_builder_sortable").sortable(); I want 1 draggable list connect to multiple sortable list, such as: $("#social li").draggable( { connectToSortable: '#form_builder_sortable, #form_builder_sortable_sample', helper:'clone', revert:true }); Have you got any

FullCalendar Remove External Event by ID

由 非 Y 不嫁゛ 提交于 2020-01-24 21:12:08
问题 I am using FullCalendar and jQuery UI to drag "Days Off" onto my calendar as background events. Since you cannot click on background events in FullCalendar, I am creating a list with my days off and a "Remove" button next to them with the event id as a data attribute. However, when I click on the Remove button, it does not remove the event, even though it has the proper ID. Please take a look at this jsFiddle: https://jsfiddle.net/aaroncadrian/odhL964L/ For the sake of showing you that the

Simple drag and drop code

由 拜拜、爱过 提交于 2020-01-22 09:30:10
问题 Im struggling with seemingly a simple javascript exercise, writing a vanilla drag and drop. I think Im making a mistake with my 'addeventlisteners', here is the code: var ele = document.getElementsByClassName ("target")[0]; var stateMouseDown = false; //ele.onmousedown = eleMouseDown; ele.addEventListener ("onmousedown" , eleMouseDown , false); function eleMouseDown () { stateMouseDown = true; document.addEventListener ("onmousemove" , eleMouseMove , false); } function eleMouseMove (ev) { do

DragTabFrame closing inconsistently

由 扶醉桌前 提交于 2020-01-21 07:20:48
问题 The code below is supposed to work a little like the Multi-Document Interface (MDI) you might see in a browser like FF, IE or Chrome. It presents 'documents' (a black buffered image as spacer) in a tabbed pane such that they can be dragged from the pane into a new (or existing) window by user choice. But it has had issues with closing frames once they have no more tabs, as well as closing the JVM when there are no further visible windows. I think I fixed them by checking with a Timer in the
订阅 draggable