draggable

how to drag and drop a copy of another drag-n-dropped image using html5?

假装没事ソ 提交于 2019-12-13 20:30:31
问题 I have an implementation of using drag and drop for upload purposes using examples from http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html This is what it looks like when it works. Before drag and drop: http://cl.ly/image/0c3f1m0M2K2D After drag and drop: http://cl.ly/image/0Z131N333n0L The droparea is a div that I call dropArea. Now the problem is out of the supposed 4 images I have drag-n-dropped, I then wished to select two of them to be of a special status. For eg, I want to

Vue.Draggable delete item by dragging into designated region

◇◆丶佛笑我妖孽 提交于 2019-12-13 17:01:31
问题 I've been banging my head against the wall trying to figure this out. I found an example of pretty much exactly what I'm trying to do via the Sortable.js library repo here but I haven't been able to implement it using Vue.Draggable. My theory of how to do it is add a <draggable/> element that is in the same group as the rest of the elements and listen for an @add event on it, then remove that dragged element from its list. One gotcha (maybe) is I'm trying to designate a "trash" button as the

How to enable the ghost effect on a table row in Safari HTML5?

早过忘川 提交于 2019-12-13 16:39:48
问题 I don't have the ghost effect when I drag item ( table row) on Safari. I use table so this is a tr . The ghost effect is when you can see your item which follow your mouse. On Chrome, FF it works. Anyone know why? I noticed it doesn't only on tr/td . If I use li or a , I can see the ghost effect... Chrome Safari 回答1: On OSX Safari the drag helper (ghost effect) shows up as soon as you attach drag&drop related event listeners to the table rows. <table> <tr id="row1" draggable="true"> <td>1</td

Making Divs Draggable But Contained Using jsPlumb With YUI

此生再无相见时 提交于 2019-12-13 16:22:39
问题 I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using: jsPlumb.draggable("window2", { containment:"parent" }); the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward. To see

JQuery: z-index ordering with draggable divs

為{幸葍}努か 提交于 2019-12-13 16:17:53
问题 In the following code I have: divs that pop up when you click the corresponding buttons if you drag them around, the (last) active object should be on top Currently my code doesn't work as expected where the last active element is bought to the front. I am trying to create an extensible solution where there can be about five or so more buttons later with different content. Also, is there a way to let the divs pop up near to the buttons that they are shown from? If I drag the button before I

Jquery UI - Getting one element out of a display:hidden element when dragging

落爺英雄遲暮 提交于 2019-12-13 14:47:52
问题 I have a group of elements sitting on a 'conveyor' element within another element that is set overflow:hidden using css. How do I, when dragging, get the element 'out' of the holder element that has overflow set to hidden? When I drag the "item" classed image, it only drags within the holder, when I try to move it "outside" the holder, it hides, and won't move outside the old holder element. <div class="holder" style="overflow:hidden;"> <div class="conveyor"> <img src="image1.jpg" class="item

jQuery UI draggable not working in chrome

拈花ヽ惹草 提交于 2019-12-13 09:05:22
问题 jQuery draggable not working in chrome Code: <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.16.custom.min.js" type="type/javascript"></script> <script type="text/javascript"> $(function() { $( ".drag" ).draggable(); }); </script> <div class="drag">draggable</div> 回答1: JS FIDDLE Test Try this. In my browser dargging works correctly. Working in your browser? If not working, then you wrong plugged jqueryui library. <script src="//code.jquery

Drag and Drop from localstorage HTML5 not working

亡梦爱人 提交于 2019-12-13 08:30:27
问题 I have created a web page with drag and drop features for some of the elements. Once the drag and drop are done, I store the elements which are in the droppable area in the local storage of the browser. Later when the page is accessed again, I take the values from local storage and restore them on the web page. After I restore, I couldn't drag the elements in the droppable area within its containment. Could anyone please help? Below is the code I have used. Here is the link to FIDDLE HTML ×

EASELjs drag event, what's wrong here

廉价感情. 提交于 2019-12-13 07:11:56
问题 for the start guys thanks for an interesting framework, great job, I'll hope that documentation in the future will be better, in my opinion it lacks real working examples for each object method. So here is my question, I have a dilemma with with this framework, can some one put a finger on what I did wrong here. I build it from this example. Here is the working code on jsfiddle . Last version should move the rectangle on the canvas. P.S. It's the same without Container. var elementOptions = {

Three.js - Drag Collada Files

北战南征 提交于 2019-12-13 05:59:05
问题 My objects are moving on the XZ axis through drag and drop. Unfortunately the collada files doesn't act like them... Here is my code: var container; var camera, controls, scene, renderer; var objects = [], plane; var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(), offset = new THREE.Vector3(), INTERSECTED, SELECTED; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera(