mharris717 / ember-drag-drop Goto Github PK
View Code? Open in Web Editor NEWDrag and Drop Addon for Ember CLI
License: MIT License
Drag and Drop Addon for Ember CLI
License: MIT License
Passing the Event along opens up more use case support. My immediate need is being able to determine the exact drop location of the dragged item so I can draw its position on a canvas.
Since handlePayload()
already passes along target, it seems logical to just tap in there and allow it to pass along the event
.
Example use case for passing the event to the target action:
// my-component.hbs
{{#draggable-object-target action="addElement" status="Add to Canvas"}}
...
{{/draggable-object-target}}
// my-component.js
export default Ember.Component.extend({
...
actions: {
addElement(element, ops) {
let x = ops.event.originalEvent.pageX - this.$('#my-canvas').offset().left;
let y = ops.event.originalEvent.pageY - this.$('#my-canvas').offset().top;
}
}
...
});
Hi,
First of all, thanks for this addon, it's great! I ran into a small issue while using it:
Given a horizontal list: [A, B, C, D, E]
With the current swap logic, if I try to drag D to A (without dragging the element over the list) we will get: [D, B, C, D, E], which doesn't seem to be the intuitive result. I would expect the result list for this case to be [D, A, B, C, D, E].
This happens because of the current swapObjectPositions
method implementation on the service.
Wouldn't it make sense to change that? If you think so I can create PR with code that changes that behavior.
swapObjectPositions: function(a, b) {
var newList = this.get('arrayList').toArray();
var newArray = Ember.A();
var aPos = newList.indexOf(a);
var bPos = newList.indexOf(b);
newList.splice(aPos, 1);
newList.splice(bPos, 0, a);
newList.forEach(function(item){
newArray.push(item);
});
this.set('sortComponentController.sortableObjectList', newArray);
}
Hope I made myself clear.
Cheers!
ember-cli version is 1.13.6
ember version is 1.13.7
DEPRECATION: Using the '{{#each item in model}}' form of the {{#each}} helper ('px-web-client/templates/components/object-bin.hbs' @ L5:C2) is deprecated. Please use the block param form instead ('{{#each model as |item|}}'). See http://emberjs.com/guides/deprecations/#toc_code-in-code-syntax-for-code-each-code for more details.
I have a {{draggable-object}} with a pretty sizeable component with some form input elements inside. In chrome, I can drag and drop just fine, but in Safari, trying to start a drag on an input breaks the draggable object.
Here's a screencast I just shot: http://quick.as/qw4cb4yp
I start in Chrome, where it behaves as expected, and then I try things in Safari from :12 on, where things start breaking.
Any experience with this one?
Nice to have axis support like at others libraries. I need block moving in horizontal, but looks on addon, it not support this feature.
Unless I completely misunderstand what swap is supposed to do,useSwap=true
doesn't change anything. I see the default is true
but regardless, items in a list are always shifted, not swapped.
See the demo: http://mharris717.github.io/ember-drag-drop/#/horizontal
When trying to log out data in the console (e.g. {{log 'asdf'}}
), the following error message appears:
"Assertion Failed: You attempted to overwrite the built-in helper "log" which is not allowed. Please rename the helper."
A little digging seems to point to ember-drag-drop as the author of the conflicting helper. I'm on Ember 2.10.2
Hi! Thanks for this awesome addon.
I was wondering how would you suggest writing integration and acceptance tests for the features where dragging & dropping is involved? I guess it would be doable by breaking the interaction into triggering single events at the proper moment, but this is not that simple. Do you have any recommendations how to do it efficiently?
I am trying to style the cursor, e.g.:
.card:hover {
cursor: -webkit-grab;
}
.card:active {
cursor: -webkit-grabbing;
}
This works until I start moving the card—then the cursor resets to default for some reason. I'm not sure why this is and/or if it is a bug.
I'm currently building a mildly more advanced version of the 'Classify Posts' example, you can sort them also. I'm running into the issue that the individual lists are not sorting internally.
I can drop a new item on any position of the list and it will place itself to the end of the list, but when it's just working with elements from it's own list, they are not switching positions before firing the sortEnd action.
template.hbs
{{#draggable-object-target action="dropEvent"}}
{{#sortable-objects sortableObjectList=sortableObjectList sortEndAction='sortEnd' enableSort=true}}
{{#each sortableObjectList as |card|}}
{{#draggable-object content=card isSortable=true}}
<div class="card-item">
<h2>{{card.title}}</h2>
</div>
{{/draggable-object}}
{{else}}
<div class="dropzone"></div>
{{/each}}
{{/sortable-objects}}
{{/draggable-object-target}}
component.hbs
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
dropEvent(content) {
if (this.get('unsorted')) {
content.set('section', undefined);
content.set('sectionOrder', 0);
} else {
content.set('section', this.get('section'));
}
content.save();
},
sortEnd(content) {
if (!this.get('unsorted')) {
debugger
};
},
},
});
Is there anything glaring I am missing? sortableObjectList is an unsorted array of card objects.
I'm trying to add a sortable list to an app I'm building, but have found that after a drag-drop operation, the list of items will usually be rendered in the wrong order. The underlying list is in the correct order.
I thought this was an issue with my code, but after copying in the template, controller and styles from the sortable example, I'm still seeing exactly the same behaviour. When I view your example online, it works perfectly! What could I be missing?
When using ember-cli
v2.12.0 I see this notice:
DEPRECATION: Addon files were detected in `/path/to/app/node_modules/ember-drag-drop/addon`, but no JavaScript preprocessors were found for `ember-drag-drop`. Please make sure to add a preprocessor (most likely `ember-cli-babel`) to in `dependencies` (NOT `devDependencies`) in `ember-drag-drop`'s `package.json`.
I need to sort multiple list in my application. I have tried this addon, but I am not able to drag and drop, once I have dragged and dropped all elements from one list to another.
Eg:-
List 1
List 2
I have moved all items of List 2 to List 1,
List 1
List 2
After this I am not able to drag and drop items from List 1 to List 2. Is this some bug or any configuration required to drop to empty list. Please help.
I might be really noobin with this (I'm a node beginner), but with:
Ember CLI 0.1.4
and running
npm install ember-drag-drop --save-dev
npm WARN unmet dependency /Users/arirose/code/superhelp-ember/node_modules/bower/node_modules/bower-registry-client/node_modules/request/node_modules/form-data requires async@'~0.9.0' but will load
npm WARN unmet dependency /Users/arirose/code/superhelp-ember/node_modules/bower/node_modules/bower-registry-client/node_modules/async,
npm WARN unmet dependency which is version 0.2.10
When I
ember serve
File: superhelp-ember/mixins/droppable.js
AST contains no nodes at all?
Error: AST contains no nodes at all?
at /Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/esnext/node_modules/recast/lib/comments.js:162:19
at Array.forEach (native)
at exports.attach (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/esnext/node_modules/recast/lib/comments.js:120:14)
at Object.parse (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/esnext/node_modules/recast/lib/parser.js:49:5)
at compile (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/esnext/lib/index.js:30:20)
at EsnextFilter.processString (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/index.js:41:16)
at EsnextFilter.Filter.processFile (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/broccoli-filter/index.js:136:31)
at Promise.resolve.then.catch.err.file (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/broccoli-filter/index.js:82:21)
at $$$internal$$tryCatch (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/broccoli-filter/node_modules/rsvp/dist/rsvp.js:490:16)
at $$$internal$$invokeCallback (/Users/arirose/code/superhelp-ember/node_modules/ember-cli-esnext/node_modules/broccoli-esnext/node_modules/broccoli-filter/node_modules/rsvp/dist/rsvp.js:502:17)
Any ideas?
I'm not sure if the bug is related to a browser or to this plugin.
The dragged object is not visually the same if you have text selected or not during a drag.
e.g. http://mharris717.github.io/ember-drag-drop/#/simple
If you select all the page with CMD+A or Ctrl+A during the drag all the page will be visible.
When nothing is selected, everything is fine.
In my app as a workaround I remove via JavaScript all selection on mousedown. Using the start hook for that doesn't work currently.
Wonderful addon! ⛵
Unless I'm mistaken currying + closure actions could be used instead of the current method for setting secondary arguments.
Perhaps a future version could deprecate the previous usage (simplified codebase) and align with closure actions. Will also simplify passing extra arguments for misc types of actions.
What do you think?
Source:
https://dockyard.com/blog/2015/10/29/ember-best-practice-stop-bubbling-and-use-closure-actions
Hi. Been noticing that with multiple lists on a page that dom elements can be duplicating.
Using this demo:
http://mharris717.github.io/ember-drag-drop/#/sort
dragging an object from the left and placing it over the top of another object will duplicate the object from the right list to the left list and you'll have two of the same elements. (attached screen shot)
Any ideas on what could be happening?
Check this issue in Ember.js's repo:
Please remove it ASAP for Ember 2.10 compatibility.
It would be nice if {{draggable-object}}
was available as a component mixin, my specific usecase is as follows: I have a track-item component that I render inside an each block, and I wanted to make it drag 'n droppable. I ended up wrapping the entire template:
Problem is, the DOM structure now nested:
<li class="ember-view track" id="ember683">
<div class="ember-view js-draggableObject draggable-object" draggable="true" id="ember684">
<!-- ... -->
</div>
</li>
The styling is now broken, because it wasn't expecting the extra object. Admittedly, I can just tweak the CSS (which is what I did), but it would be nice to get rid of the extra wrapper.
Since the tests
directory isn't empty, I think it would be great to expose your suite of test helpers for developers to use to test drag-and-drop in their own apps.
What would it take to make your test helpers shareable?
Would documenting how they're used be a good start?
Hello!
Great job on this addon! I'm using it and it works like a charm!
well except for one little thing: I noticed that the addon generates some errors if the content
object is a native JavaScript object and not a Ember one due to the use of obj.set()
and obj.get()
.
I think I read something about that and how using Ember.set(obj, property, value)
instead of obj.set(property, value)
can help solving this.
If it's ok with you I can check that out later this week (or perhaps even today) and hopefully send a PR that would fix that :)
We noticed that if you drag an object across multiple lists, the sortingScope
property for the currentDragItem
returns undefined after the first rerender
. You can see this happening in the demo as well when the object re-renders under the new list but then you cannot move it back or even another position in the same list. We're thinking we could just set a string property called currentSortingScope
on dragStart in the coordinator service instead of relying on the property on the draggable object component.
Drag on element and try to scroll up or down in a page isn't working. Is this supported or unexpected behavior?
DEPRECATION: A property of <frontend@view:-outlet::ember1142> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property] at HANDLERS.(anonymous function) (http://localhost:4202/assets/vendor.js:22015:7) at raiseOnDeprecation (http://localhost:4202/assets/vendor.js:21923:12) at HANDLERS.(anonymous function) (http://localhost:4202/assets/vendor.js:22015:7) at invoke (http://localhost:4202/assets/vendor.js:22031:7) at deprecate (http://localhost:4202/assets/vendor.js:21984:32) at Object.deprecate (http://localhost:4202/assets/vendor.js:32023:37) at Class.exports.default._emberMetalMixin.Mixin.create._Mixin$create.scheduleRevalidate (http://localhost:4202/assets/vendor.js:59292:22) at http://localhost:4202/assets/vendor.js:29536:32 at Object.notifySubscribers (http://localhost:4202/assets/vendor.js:37936:11)
This deprecation warning is triggered when you using draghandler. Triggered here - https://github.com/mharris717/ember-drag-drop/blob/master/addon/components/draggable-object.js#L40
P.S. I'm using Ember 2.5
My scenario involves a user with a list of created items on the left and an edit/create panel on the right. The user should be able to select a type of item to create from the panel and (with one click) drag that type into the item list on the left and place it in the position it should be in. However the types list in the panel on the right is not allowed to be reordered or altered. Before / after of dragging from the panel to the list should keep the panel in the same state.
Unfortunately, I've been unable to drop outside {{draggable-object}}
's into {{sortable-container}}
's. I think that's the subject of another issue that @boris-petrov mentioned here.
Likewise, I've tried keeping two {{sortable-container}}
's with the same sortingScope. But that allows items in the panel to disappear / reorder themselves. Could a flag be added to disable internal sorting of sortable-containers, and perhaps something to shallow-copy the dragged object into the receiving list, adding it to the receiving list but not modifying the list that owned the dragged object?
If you go to the example with two sortable-objects components and try to drag from one sortable-objects
component to the other, the dragged item from the first replaces the draggable item for the other component. If you keep doing this strange things start happening with the text in the boxes.
I assume that the expected behaviour would be to disallow dragging items from from one sortable-objects
component to another.
Would also be great if this worked on mobile.
Perhaps using the Draggabilly library?
Great addon!
Bit of a ember component novice and I'm wondering how I could go about validating the drop event based on the contents of the model and then cancel it if certain parameters are no met.
Thanks!
Hello,
I'm trying to populate the sortableObjectList array dynamically and have its contents be sortable. Any HTML that's set in the array doesn't get rendered in the handlebars, is there a reason for it?
I am working on a designer with a set of questions in the left field, and an open editor to move these questions into on the right. To give an idea, it currently looks like this.
Now if I can sort the two questions in the right field just fine. If i drag a question from the left field to the right however, it will automatically drop the question if i mouse over an already existing question in the field. What i want is to be able to drag a question from the left field over the questions in the right field, and drop it whenever i let go off my mouse.
Currently i run into the problem described above. I can also remove the sortingScope on the left field, in which case the question always drops on the bottom of the right field when dragged, which is also not what i want. I have seen a couple of similar issues, but i couldn't quite make out if someone ran into thisone yet, so apologies if this is a duplicate.
If anyone has a workaround available i would appreciate that too!
(note: I still need to reproduce this in a controlled (and 100% updated) environment, so I will return with that soon if I can)
When dragging around objects in my grid of items, after a while, more on large collections, I notice a latency in the "drop" action in the grid. It goes away with refreshing the page, and doesn't happen when I manually shift the objects' order in the main array. It is enough to grind the page to halt over a long period of time though.
{{#sortable-objects sortableObjectList=model.joinItems sortEndAction='sortEndAction' useSwap=useSwap}}
{{#each model.joinItems as |item|}}
{{#draggable-object content=item isSortable=true}}
...
{{/draggable-object}}
{{/each}}
{{/sortable-objects}}
(I've been able to reproduce the issue whether or not sortEndAction
exists/is empty)
Or I'm just using it wrong--which is likely, because I have a pretty thin knowledge of this addon so far.
ember v
ember-cli: 2.7.0
node: 6.3.1
os: darwin x64
Thanks!
Max
I have a page with multiple targets containing lists of objects that need to be sorted. The page would be simplified if I could define the target as a sortable list or the other way around a sortable list as a target. I think it might reduce some complexity as well.
I would like to implement the drag-between-sortable-containers feature, but there is an outstanding pull request and I'm not sure what the status is of that. Any guidance would be appreciated.
If you click and drag on the containing div a javascript error is thrown.
drag-coordinator.js:53 Uncaught TypeError: Cannot read property 'target' of null
Easily replicated on the demos. Just click and drag on the white space between the boxes: http://mharris717.github.io/ember-drag-drop/sort
When you drag and drop a draggable object into a target using Firefox (I'm using 35.0), the browser redirects to a url consisting of several seemingly random digits. This only happens in Firefox.
Hi guys,
I've been working on extending the addon to support some features that I need to use in a project I'm working on. Specifically, I need to have multiple sortable-objects components on one page and allow dragging of items between those lists.
I also need to allow nested sortable-objects on one page.
I've got a first-pass of this working on a local branch and was hoping to push to the repo but I'm getting a 'Permission denied' when attempting that. Any chance you could add me as a collaborator so that I may create a PR and get your feedback on my changes with the hope of having them merged into master at some point?
Thanks,
Graeme
Thanks for these components!
It would be nice to be able to use this for reordering elements of a single list. However, as it is, no information about where the object is dropped is passed via the action. Looking under the hood a bit, in draggable-object-target/handleDrop, the event.originalEvent.toElement
seems to have the DOM node where something was dropped. A higher level interface would be nice -- where an indication about on or between which content another element was dropped was passed via the action.
I'm having an issue with {{#draggable-object-target action="dropEvent"}}
.
I can't recreate it in a fresh app, but I was wondering if you have seen this before and have any tips?
Uncaught TypeError: Can't add property _currentDrag, object is not extensible droppable.js:159
I'm on 2.5.1
Also with many objects (30 +) on page you start to notice the performance issues.
On a side note drag and drop is working well with 10 sortable target areas (without the dragHandle).
I'll attempt a fix.
Thank you
Would it make sense to add the ability to drag multiple element at once?
e.g. after selecting two or more item, it would be possible to drag them all at once.
Currenlty working on writing tests for a compenent that is using draggable-object
and draggable-object-target
.
When the full app is running everything works as expected, but when I try and run ember integration tests things blow up on this line draggable-object-target.js#L10
accept_drag
class is not set when you drag an object over a draggable-object
even if it's contained by a draggable-object-target
.
The class is not set but if you drop the object the action will be executed.
I have a position
property to objects used in a sortable list. I want to update the position at the end of the drop. All position of the group have to be updated.
I didn't saw this option. Is it possible yet ? I'm ready to contribute if you're interested.
This line:
https://github.com/mharris717/ember-drag-drop/blob/master/addon/services/drag-coordinator.js#L121
will cause trouble if consuming app disable prototype extension, and add-ons disable this by default, so ember-drag-drop will not work properly for one of situations above.
Besides, toArray
method will not guarantee the order after transformation, I think just get
will be enough.
I have been using views rather than components as drop targets -- which means I need to inject "coordinator" into views. This is not so hard, but makes the default injection superfluous. Perhaps you could make the injection into a blueprint?
(A related issue, given that you are injecting into a global namespace -- perhaps "dragDropCoordinator" would be a better name for the object than "coordinator".)
Thanks for your work!
Can this be used to drop a file from outside the browser window as the dropped object?
When I try to do that, I see these errors in the console:
DEPRECATION: The length
property of <(unknown mixin):ember442>
is an Ember.Binding
connected to contentLength
, but Ember.Binding
is deprecated. Consider using an alias
computed property instead. [deprecation id: ember-metal.binding]
See http://emberjs.com/deprecations/v2.x#toc_ember-binding for more details.
trekclient.js:451 Uncaught no obj for key getObj @ trekclient.js:451getObject @ trekclient.js:400handlePayload @ vendor.js:87221handleDrop @ vendor.js:87228acceptDrop @
451 Uncaught no obj for key
Hey, emberizas! I have installed ember install ember-drag-drop
. I use ember-cli 2.10.0
on Ubuntu 14.04.5. The project is built, and run with an Express server (node server.js
), and the file name list (allNames
) comes from Nodejs reading a disk directory. Now: I have great expectations regarding this ember-drag-drop! However:
I did set up this template code in order to display a set of thumbnails as a sortableObjectList in order to make it possible to sort their order like in http://mharris717.github.io/ember-drag-drop/#/horizontal :
The introduction of the above drag-drop helpers did not change the appearance of the rendered page (that is, still looks nicely untouched). Now each img_mini block is draggable, including its img and img_name.
Did I position those handlebars as intended? The draggable blocks are not droppable, and my browser console prints TypeError: aSortable is undefined
. Also, compared to the "horizontal" example, the class sortObject
is missing along js-draggableObject
... etc. However, by introducing overrideClass='sortObject show-inline'
I succeded to generate the equal html, but the droppability still didn't appear ("rubber-band-return"), and the aSorttable error remained.
It appears that the if the draggable-object
components inside a sortable-objects
have differing sizes, that can lead to some issues. I have been able to reproduce it with shifting. I don't know if the issue exists when swapping.
I am able to reproduce this on the demo page with a bit of tweaking. The steps are as follows:
1, 3, 2, 4
after having touched only element 4
)I don't know if the examples are up to date, but in the project I am working on I observe the same behavior using ember-drag-drop 0.3.7.
We have a use case where we have a sortable container and one can reorder items inside but we want to also be able to drop items from the outside into it. For the best UX one would expect that while the user is dragging some outside object over the sortable container, the items will be shifted apart to make space for the new one in the place where his cursor is. If he drops the new item, it will be placed there. If he drags away from the sortable container, the items should be "merged" again.
I guess our use case could be fixed by you triggering a couple of new events - dragNewItemOver
, dragNewItemOut
- in your code. Then we would be free to add/remove the dragged object to the sortableObjectList
.
Additionally, the sortEndAction
should not be triggered for dragged items that are not part of the sortableObjectList
, because the user might not have added the item in the list.
I'm getting Cannot create property 'isDraggingObject' on string 'kitten'
. Perhaps this is weird and uncommon :) But would it make sense to adjust the test?
if (obj && typeof obj === 'object') {
Ember.set(obj, 'isDraggingObject', true);
}
Follow up from #28
https://github.com/mharris717/ember-drag-drop/blob/master/addon/components/sortable-objects.js#L14
This line looks like it is impossible to have more than one sortableList per page.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.