supraniti / lean-mean-drag-and-drop Goto Github PK

Hi :)
Is there any way to alter or remove the ghost animation of the element being dragged ?

Thanks !

It should scroll the nearest ancestor with a scrollbar on the given axis. I say "on the given axis" because you could have a situation where the parent is horizontally scrollable but the grandparent is vertically scrollable.

please add it in npm to import in webpack

It would help if the documentation outlined all the classes added to elements. I want to do some cool stuff. Also personally, I found the transitions were too long and didn't realise it was just a CSS transition :)

Hey, cool library. Heads up, I'll be creating a few issues :).

How does this compare to other libraries, like dragula for example, when it comes to performance / efficiency? I'm finding it hard to evaluate that (desktop & mobile).

That sounds weird but it makes sense. Let's say you have the "Multiple containers + handle" example hooked up to a framework and the items in each container are algorithmically sorted, not decided by the user. I want to allow the user to drag from container A to container B (no ghost element shown in B, just the container itself would change style, see #5), and when it's dropped the item's position would be decided by the sorting algorithm. So, the items in container A shouldn't reorder if the user dragged an item up/down the list.

If any of that isn't clear, let me know. Here is a CodePen where I've gotten most of that working with dragula (ignoring the sort): http://codepen.io/adam-lynch/pen/XRJJWr.

One thing I didn't achieve in that CodePen example is I'd allow like the original element not to disappear from its original location when I'm dragging it (and I'd like to style it differently) but maybe that's possible via CSS with this library? I'm not sure (see #2).

I guess what I want is the items in the containers to be untouched as the user drags (but they should still see the element is being dragged / the floating element following the cursor).

Are there any examples on how to integrate LMDD (which I think is fantastic) with React? Or do you know of any compatible React wrappers out there?
Thanks!

What should we do when we use input element in draggable item? Below example, I added input element into one of draggable grid items, Then I want to click this input, but it is not clickable. Because your draggable item js code prevents me to click on it. How can I overcome this?

https://supraniti.github.io/Lean-Mean-Drag-and-Drop/

While using demos in Internet Explorer, library throws error Object doesn't support this action. This error caused by below snippet.
scope.dispatchEvent(new CustomEvent('lmddbeforestart', {'bubbles': true})).

Reported error is coming because for IE versions >= 9, custom events must be created using document.createEvent() and then initialized using the initCustomEvent method of the previously created event.

So after doing stackoverflow I found we can fix this issue by adding below pollyfill provided by mozila firefox.

(function () {
  if ( typeof window.CustomEvent === "function" ) return false;
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }
  CustomEvent.prototype = window.Event.prototype;
  window.CustomEvent = CustomEvent;
})();

Hello

your javascript library is really good,unfortunatly i dont see how to to the next following operation,
i would like to do like a quizz when i release the object on top of the right location, i could replace of the overlapped object.Do you know how to achieve this goal using your lib?

kind regards
dav

LMDD works fine if document or body are the closest positioned elements to the element being dragged, but it doesn't render correctly if the offsetParent is an element positioned at something other than 0,0 relative to the document.

The problem seems to be that LMDD uses getBoundingClientRect() to determine the placement of the container of the dragged element, and that's always calculated relative to the viewport. Then that the top and left values of those are used in conjunction with scroll values to set the rectRef of the cloneRef. But when the top and left of cloneRef are set using those values, it treats those values relative to offsetParent, not to document's origin, and thus cloneRef is placed too far down and to the right.

Have I missed an option for dealing with, or is a limitation of the library?

Thanks.

Think of the "multiple containers + handle" example. I need to know when the element currently being dragged is over another container (i.e. when the ghost element is shown in that container) so I can add a class to it and style it differently.

You could emit an event (and or add a class) when it moves over it and moves out (but you'd have to add the logic to figure that out). You could alternatively emit an event when the element is being dragged (i.e. it would be emitted a lot of times for one drag) and leave it up to the user to do the rest in the callback (although they might implement it inefficiently).

I would like to prevent parent containers from being dragged into other parent containers but I would still like to be able to drag the children and sub-children around within each other's parent containers. Is this possible? If so, what coding direction would you advise I take?

Thanks!

Related to #2. It's not a huge deal but it would be nice to be able to customize the classes which are added to elements. So if my item is .item, I might want .item--is-being-dragged or something.

When trying to reorder elements, it feels a little difficult / the space I need to drag the element to is too small. I could be wrong but it seems like it won't reorder until the middle of the element being dragged passes the end of the sibling, whereas alternative libraries seem to reorder when the middle of the element being dragged passes the middle of the sibling.

I guess this would be particularly annoying with longer elements.

hi i have error in load in webpack

[Vue warn]: Error in mounted hook: "ReferenceError: lmdd is not defined"

i add this line in app.vue aslo

• Edge 38 on Windows 10: Broken.
• Firefox 52 on Windows 10: Does nothing (just highlights text).
• Chrome 57 on Windows 10: Fine.
• Opera 42 on Windows 10: Fine.
• Chrome on Nexus 5X, Android 7.1.2: Broken (page scrolls when dragging).
• Chrome on Acer tablet, Android 5.1: Fine.
• Safari on iPad Mini (not sure which one), iOS 9.3.4: Fine.

:/