draggable

问题 I am trying to convert an angular directive written in angular 1.* to angular 2. Here is the original directive code: this.directiveModule.directive('draggable', function(CONFIG) { return { restrict: 'A', link: function(scope, elem, attrs) { var setInitPosition; setInitPosition = function() { return elem.css({ top: scope.position.top + 'px', left: scope.position.left + 'px' }); }; elem.draggable({ containment: "parent", stop: function(ev, ui) { return scope.position = { top: ui.position.top,

问题 I Have div included in another parent div that are both allowed for "drop". In the example a class named "red" is added to all droppable object in dragenter event. So if I enter the mouse durring drag in child element both child and parent will get "red" class. When I abort the drag&drop or if I leave elements during operation, the dragleave event will remove the added "red" class. The problem is when I drop the element into child there are two options : Option 1 : event.stopPropagation() is

问题 I'm trying to create a dynamic input element that is draggable. Now the problem is I create an element but when I use something like $("#in"+index.toString()).draggable({cancel:true}); after I append it to the container div, it's not working. Basically it's not working for the dynamically created input element of a certain id. Here's the code and please feel free to point out problems. I could really use some help on this one. Thanks! http://jsfiddle.net/ithril/hRCun/5/ 回答1: The problem is

问题 I'm trying to implement something very similar to what 3D modeling programs do, when dragging an object along a local axis. The main difference is, that you don't move the cursor around the screen, instead you freely move the camera and the cursor is always in the middle of the screen. Kind of like a first person game. Imagine pointing the camera at the face of the cube below, marked with a blue cross (the cursor). You press and hold the mouse to "grab" the cube. The dragging of the cube

问题 I am trying to get parent renderNode of a draggable modifier on 'end' event, is there any api to get a renderNode to which draggable belongs to? My code is as follows : /*globals define*/ define(function(require, exports, module) { var View = require('famous/core/View'); var Surface = require('famous/core/Surface'); var Transform = require('famous/core/Transform'); var StateModifier = require('famous/modifiers/StateModifier'); var Draggable = require("famous/modifiers/Draggable"); var

问题 i have the following situation (please see image below after reading the following): .dragoverlay ( white rectangle in image) is a (jQuery) draggable div. it's the same size as the browser viewport. .items (small red square(s) in image) is an absolutely positioned div of size 0x0. The light blue items squares are absolutely positioned divs with an image inside and are located within .items . The dark blue polygons are imagemaps which belong to the items. I currently have the following html:

问题 Using the example here as a starting point, I set out to customize my draggable and sortable data. In the linked example, we have simple text in the draggable. I replaced it with a select tag. When dragging the select element into the sortable, I would like to use only the value of the selected option when moving it to the sortable list. To this end, I use the custom helper, but unfortunately, as soon as I drop it, it turns into a select element again. $("#draggable").draggable({

问题 I am using JQuery-ui draggable & droppable. I want to add dropped elements to the drop-target container, while preserving the apparent position that it had when it was dropped. Using .html() lets me preserve the position data added by the .draggable() function, but because they become children of a new element, they snap to a new position relative to that element. I experimented with helper:clone, but found that it removed all positioning information. Here is my code, which adds dropped items

问题 Microsoft Edge shows a confusing icon when dragging and dropping elements using the html "draggable" attribute. I think it might be considered a "cursor", but I am unsure. Regardless, is it possible to hide this copy/stop icon? Microsoft Edge on Windows Example As far as Windows is concerned, it looks like this icon only shows up on Edge. Chrome has a default behavior of a cursor change (much less obtrusive). Google Chrome on Windows Example Any browser on MacOS has neither the icon or the

问题 This is in relation to implementing drag and drop using vue. I have a draggable div container. // BoardColumn Component Parent Container <template> <div draggable @dragover.prevent @dragenter.prevent @drop="dropColumn($event, columnIndex)" @dragstart="setPickColumnInfo($event, columnIndex)" > <div class="column bg-grey-light m-4"> <div class="flex items-center mb-2 font-bold"> {{ getColumnName() }} </div> <div class="list-reset"> <TaskCard class="task" v-for="(task, $taskIndex) of columnData