Okay, I have an element set up to receive a file-drop event, but when I look in `event.dataTransfer` it is blank. I haven&#39;t gotten around to learning the drag-n-drop HTML5 API just yet and am still a little foggy on it. I&#39;m working on it at [my site][1]. If you wouldn&#39;t mind poking around my code and seeing what&#39;s going on, it would be highly appreciated. The entire `event` object is being logged.


  [1]: http://southshift.com/backstage/

event.dataTransfer.files is empty when ondrop is fired?

When I make a draggable clone and drop it in a droppable I cannot drag it again. How do I do that? Secondly I can only figure out how to us `.append` to add the clone to the droppable. But then it snaps to the top-left corner after any existing element and not the drop position.

    $(document).ready(function() {
    	$(&quot;#container&quot;).droppable({
    		drop: function(event, ui) {
    			$(this).append($(ui.draggable).clone());
    		}
    	});
    	$(&quot;.product&quot;).draggable({
    		helper: &#39;clone&#39;
    	});
    });
    &lt;/script&gt;
    
    &lt;div id=&quot;container&quot;&gt;
    &lt;/div&gt;
    &lt;div id=&quot;products&quot;&gt;
    	&lt;img id=&quot;productid_1&quot; src=&quot;images/pic1.jpg&quot; class=&quot;product&quot; alt=&quot;&quot; title=&quot;&quot; /&gt;
    	&lt;img id=&quot;productid_2&quot; src=&quot;images/pic2.jpg&quot; class=&quot;product&quot; alt=&quot;&quot; title=&quot;&quot; /&gt;
    	&lt;img id=&quot;productid_3&quot; src=&quot;images/pic3.jpg&quot; class=&quot;product&quot; alt=&quot;&quot; title=&quot;&quot; /&gt;
    &lt;/div&gt;



When I make a draggable clone and drop it in a droppable I cannot drag it again

Does anyone know of a JS framework that has drag and drop functionality and is compatible with mobile (iOS) and regular browsers?

I currently have a web-based app and it is a hassle to make its drag&#39;n&#39;drop functionality  work on iOS... I wish there was one that would do it for both...

JS library (with drag n drop) compatible with iOS and regular browsers

I am using Qt Designer, and I would like to move a couple of top-level widgets into a horizontal layout.

I have dragged a &quot;Horizontal Layout&quot; object into the form.  I am now attempting to drag the desired widgets into the layout.

Unfortunately, the new Horizontal Layout widget is infinitely thin:

![Infinitely Thin Layout][1]

... and I cannot drag my &quot;Import Progress&quot; label widget or my progress bar widget into the new horizontal layout widget.

Note that when I attempt to drag the desired widgets over the new horizontal layout widget, Qt Designer does not do anything useful for me in terms of expanding the drop region to make the horizontal widget available as a drop target.  So I&#39;m stuck.

How do I add widgets to an infinitely-thin layout widget in Qt Designer?


  [1]: http://i.stack.imgur.com/Tzhvk.jpg

Qt designer: How to add widget to a layout in the designer when the layout appears infinitely thin?

How to automate drag &amp; drop functionality using `Selenium WebDriver` in java?

How to automate drag &amp; drop functionality using Selenium WebDriver Java

Consider this [JSFiddle][1]. It works fine in Firefox (14.0.1), but fails in Chrome (21.0.1180.75), Safari (?) and Opera(12.01?) on both Windows (7) and OS X (10.8). As far as I can tell the issue is with either the `setData()` or `getData()` methods on the `dataTransfer` object. Here&#39;s the relevant code from the JSFiddle.

    var dragStartHandler = function (e) {
        e.originalEvent.dataTransfer.effectAllowed = &quot;move&quot;;
        e.originalEvent.dataTransfer.setData(&quot;text/plain&quot;, this.id);
    };
    
    var dragEnterHandler = function (e) {
        //  dataTransferValue is a global variable declared higher up.
        //  No, I don&#39;t want to hear about why global variables are evil,
        //  that&#39;s not my issue.
        dataTransferValue = e.originalEvent.dataTransfer.getData(&quot;text/plain&quot;);
        
        console.log(dataTransferValue);
    };

As far as I can tell this should work perfectly fine and if you look at the console while dragging an item you will see the id written out, which means that it&#39;s finding the element just fine and grabbing it&#39;s id attribute. The question is, is it just not setting the data or not getting the data?

I&#39;d appreciate suggestions because after a week of working on this with three attempts and some 200+ versions, I&#39;m starting to loose my mind. All I know is it used to work back in version 60 or so and that specific code hasn&#39;t changed at all...

&lt;s&gt;Actually, one of the major differences between 6X and 124 is that I changed the event binding from `live()` to `on()`. I don&#39;t think that&#39;s the issue, but I&#39;ve come to see a couple failures from Chrome when it comes to DnD while working on this.&lt;/s&gt; This has been debunked. The event binding method has no effect on the issue.

**UPDATE**

I&#39;ve created a new [JSFiddle][2] that strips out absolutely everything and just leaves the event binding and handlers. I tested it with jQuery 1.7.2 and 1.8 with both `on()` and `live()`. The issue persisted so I dropped down a level and removed all frameworks and used pure JavaScript. The issue *still* persisted, so based on my testing it&#39;s not my code that&#39;s failing. Instead it appears that Chrome, Safari and Opera are all implementing either `setData()` or `getData()` off spec or just failing for some reason or another. Please correct me if I&#39;m wrong.

Anyway, if you take a look at the new JSFiddle you should be able to replicate the issue, just look at the console when you&#39;re dragging over an element designated to accept a drop. I&#39;ve gone ahead and opened a ticket with [Chromium][3]. In the end I may still be doing something wrong, but I simply don&#39;t know how else to do DnD at this point. The new JSFiddle is as stripped down as it can get...


  [1]: http://jsfiddle.net/MtypZ/124/
  [2]: http://jsfiddle.net/VzXqK/2/
  [3]: http://code.google.com/p/chromium/issues/detail?id=142508

HTML5 DnD dataTransfer setData or getData not working in every browser except Firefox

I&#39;m trying to figure out a way to pass a native object through javascript&#39;s event.dataTransfer for drag and drop. I&#39;m writing the front end editor portion of a CMS, and want users to be able to drag and drop elements (of many different types, ranging from files to images to snippets of HTML to just about anything). That&#39;s why I want to pass a real object, so I can attach data to it to specify things that will be necessary in order to know how to render it.

One workaround is to use jQuery&#39;s .data() to attach an object to something else on the page, and then simply pass the selector string in setData... but I don&#39;t particularly enjoy that hack.

This could also be solved with jQuery UI&#39;s draggable/droppable (and I&#39;m not totally opposed to using any libraries), but since the dropzone is in an iframe, this is a actually a documented bug in the latest jQuery UI (1.10.2). Also, I would strongly prefer to do it natively if possible. There are already enough libraries in this app.

Here&#39;s the problem: http://jsfiddle.net/AHnh8/
    
    var foo = {foo: &quot;foo&quot;, bar: &quot;bar&quot;};

    $dragme.on(&quot;dragstart&quot;, function(e) {
        e.originalEvent.dataTransfer.setData(&quot;foo&quot;, foo);
    });

    $dropzone.on(&quot;dragenter&quot;, function(e) { e.preventDefault(); });
    $dropzone.on(&quot;dragover&quot;, function(e) { e.preventDefault(); });
    $dropzone.on(&quot;drop&quot;, function(e) {
        console.log(e.originalEvent.dataTransfer.getData(&quot;foo&quot;)); // [Object object]
        console.log(typeof e.originalEvent.dataTransfer.getData(&quot;foo&quot;)); // string
    });


Now, after reading the specs, I totally understand why this fails. What I don&#39;t understand, is how to ultimately achieve what I want.

Thanks

Pass object through dataTransfer

I&#39;ve seen this done in Borland&#39;s [Turbo C++][1] environment, but I&#39;m not sure how to go about it for a C# application I&#39;m working on. Are there best practices or gotchas to look out for?

  [1]: https://en.wikipedia.org/wiki/Turbo_C++


How do I drag and drop files into an application?

I&#39;m adding an html5 drag and drop uploader to my page.

When a file is dropped into the upload area, everything works great.

However, if I accidentally drop the file outside of the upload area, the browser loads the local file as if it is a new page.

How can I prevent this behavior?

Thanks!

Prevent browser from loading a drag-and-dropped file

These days we can drag &amp; drop files into a special container and upload them with XHR 2. Many at a time. With live progress bars etc. Very cool stuff. [Example here.](http://hotblocks.nl/tests/ajax/file-drag-drop.html)

But sometimes we don&#39;t want that much coolness. What I&#39;d like is to drag &amp; drop files -- many at a time -- **into a standard HTML file input**: `&lt;input type=file multiple&gt;`.

Is that possible? Is there some way to &#39;fill&#39; the file input with the right filenames (?) from the file drop? (Full filepaths aren&#39;t available for file system security reasons.)

**Why?** Because I&#39;d like to submit a normal form. For all browsers and all devices. The drag &amp; drop is just progressive enhancement to enhance &amp; simplify UX. The standard form with standard file input (+ `multiple` attribute) will be there. I&#39;d like to add the HTML5 enhancement.

**edit**  
I know in **some** browsers you can **sometimes** (almost always) drop files into the file input itself. I know Chrome usually does this, but sometimes it fails and then loads the file in the current page (a big fail if you&#39;re filling out a form). I want to fool- &amp; browserproof it.

drag drop files into standard html file input

Overview
--------

I have the following HTML structure and I&#39;ve attached the `dragenter` and `dragleave` events to the `&lt;div id=&quot;dropzone&quot;&gt;` element.

    &lt;div id=&quot;dropzone&quot;&gt;
        &lt;div id=&quot;dropzone-content&quot;&gt;
            &lt;div id=&quot;drag-n-drop&quot;&gt;
                &lt;div class=&quot;text&quot;&gt;this is some text&lt;/div&gt;
                &lt;div class=&quot;text&quot;&gt;this is a container with text and images&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

Problem
-------

When I drag a file over the `&lt;div id=&quot;dropzone&quot;&gt;`, the `dragenter` event is fired as expected. However, when I move my mouse over a child element, such as `&lt;div id=&quot;drag-n-drop&quot;&gt;`, the `dragenter` event is fired for the `&lt;div id=&quot;drag-n-drop&quot;&gt;` element and then the `dragleave` event is fired for the `&lt;div id=&quot;dropzone&quot;&gt;` element.

If I hover over the `&lt;div id=&quot;dropzone&quot;&gt;` element again, the `dragenter` event is again fired, which is cool, but then the `dragleave` event is fired for the child element just left, so the `removeClass` instruction is executed, which is not cool.

This behavior is problematic for 2 reasons:

 1. I&#39;m only attaching `dragenter` &amp; `dragleave` to the `&lt;div id=&quot;dropzone&quot;&gt;` so I don&#39;t understand why the children elements have these events attached as well.

 2. I&#39;m still dragging over the `&lt;div id=&quot;dropzone&quot;&gt;` element while hovering over its children so I don&#39;t want `dragleave` to fire!

jsFiddle
--------

Here&#39;s a jsFiddle to tinker with: http://jsfiddle.net/yYF3S/2/

Question
--------

So... how can I make it such that when I&#39;m dragging a file over the `&lt;div id=&quot;dropzone&quot;&gt;` element, `dragleave` doesn&#39;t fire even if I&#39;m dragging over any children elements... it should only fire when I leave the `&lt;div id=&quot;dropzone&quot;&gt;` element... hovering/dragging around anywhere within the boundaries of the element *should not* trigger the `dragleave` event.

I need this to be cross-browser compatible, at least in the browsers that support HTML5 drag-n-drop, so [this answer][1] is not adequate.

It seems like Google and Dropbox have figured this out, but their source code is minified/complex so I haven&#39;t been able to figure this out from their implementation.

  [1]: https://stackoverflow.com/a/7115883/196921

&#39;dragleave&#39; of parent element fires when dragging over children elements

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this:

    $j(&#39;#MyForm&#39;).enableDragDropUploads(&#39;.upload-area&#39;)

With the upload target being the action of the form.

Any solution must not prevent a regular file field from being usable (using traditional browse method).

I only need one file at a time, though of course having the option for multiple isn&#39;t a bad thing.

I&#39;ve found a couple of drag-drop upload examples:  
[http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears][1]
[http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload][2]

But the code there isn&#39;t setup as a plugin. It&#39;s probably not too difficult to change it, but also no point doing so if someone else has already done that work and is simply evading my Google searches.

I&#39;m ideally looking for a pure HTML5/jQuery solution.  
A Google Gears one is acceptable, but a Flash solution is not.


  [1]: http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears
  [2]: http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

Is there a good jQuery Drag-and-drop file upload plugin?

I&#39;m building a drag-and-drop-to-upload web application using HTML5, and I&#39;m dropping the files onto a div and of course fetching the dataTransfer object, which gives me the [FileList][1]. 

Now I want to remove some of the files, but I don&#39;t know how, or if it&#39;s even possible. 

Preferably I&#39;d like to just delete them from the FileList; I&#39;ve got no use for them. But if that&#39;s not possible, should I instead write in checks in code that interacts with the FileList? That seems cumbersome.


  [1]: http://www.w3.org/TR/FileAPI/#dfn-filelist

How do I remove a file from the FileList

My question is 2 fold, and I am hoping there are easier solutions to both provided by **WPF** rather than the standard solutions from WinForms (which Christophe Geers provided, before I&#39;ve made this clarification).

First, is there a way to make Window draggable without capturing and processing mouse-click+drag events? I mean the window is draggable by the title bar, but if I set a window not to have one and still want to be able to drag it, is there a way to just re-direct the events somehow to whatever handles the title bar dragging?

Second, is there a way to apply an event handler to all elements in the window? As in, make the window draggable no matter which element the user click+drags. Obviously without adding the handler manually, to every single element. Just do it once somewhere?

Make WPF window draggable, no matter what element is clicked

I need to drop an image file into my WPF application. I currently have a event firing when I drop the files in, but I don&#39;t know how what to do next. How do I get the Image? Is the `sender` object the image or the control?

    private void ImagePanel_Drop(object sender, DragEventArgs e)
    {
        //what next, dont know how to get the image object, can I get the file path here?
    }





Drag and drop files into WPF

It seems the drop event is not triggering when I would expect.

I assume that the drop event fires when an element that is being dragged is releases above the target element, but this doesn&#39;t seem to the the case.

What am I misunderstanding?

http://jsfiddle.net/LntTL/

    $(&#39;.drop&#39;).on(&#39;drop dragdrop&#39;,function(){
        alert(&#39;dropped&#39;);
    });
    $(&#39;.drop&#39;).on(&#39;dragenter&#39;,function(){
        $(this).html(&#39;drop now&#39;).css(&#39;background&#39;,&#39;blue&#39;);
    })
    $(&#39;.drop&#39;).on(&#39;dragleave&#39;,function(){
        $(this).html(&#39;drop here&#39;).css(&#39;background&#39;,&#39;red&#39;);
    })

Drop event not firing in chrome

I haven&#39;t seen any examples that do this. Is this not allowed in the API spec?

I am searching for an easy drag-drop solution for uploading an entire folder tree of photos.

Does HTML5 allow drag-drop upload of folders or a folder tree?

I want to have a view in which there are vehicles driving around that the user can also drag and drop. What do you think is the best large-scale strategy for doing this? Is it best to get touch events from the views representing the vehicles, or from the larger view? Is there a simple paradigm you&#39;ve used for drag and drop that you&#39;re satisfied with? What are the drawbacks of different strategies?

Basic Drag and Drop in iOS

I have elements on the page which are draggable with jQuery. Do these elements have click event which navigates to another page (ordinary links for example).

What is the best way to prevent click from firing on dropping such element while allowing clicking it is not dragged and drop state?

I have this problem with sortable elements but think it is good to have a solution for general drag and drop.

I&#39;ve solved the problem for myself. After that I found that same solution [exists for Scriptaculous][1], but maybe someone has a better way to achieve that.


  [1]: https://stackoverflow.com/questions/274843/preventing-click-event-with-scriptaculous-drag-and-drop

Preventing click event with jQuery drag and drop

I am having an undesired effect when I drag a div from a container div which is set as overflow: scroll.

I have found an example of someone else where they have had the issue but I have been unable to find a resolution

[Example on Paste bin][1]


  [1]: http://pastebin.me/49c793a050bcd

What happens is that the scroll is just increased, I can see why this would be the desired behaviour if you wanted to drag to a destination within the scrollable div but I want to be able to take it outside of its scrolling grasp.

jQuery Draggable and overflow issue

In my IntelliJ Idea 13.1.2 IDE I keep running into situations where I&#39;m selecting on a click and drag via my laptop touch pad. I keep accidentally clicking and dragging text and cutting lines. I&#39;ve searched the options and settings panels for the words click and drag but I don&#39;t see a way to turn this feature off. IntelliJ&#39;s help talks about how to use click and drag cutting but doesn&#39;t say how to disable it.
Does anyone know how to disable cut and paste through click and drag in the IntelliJ IDE?

Disable click and drag cut and paste in IntelliJ Idea IDE

Is it possible to use jQuery&#39;s `drop` event for dragging files from the desktop?

If so, how do I get the dropped file data?



How to use jQuery&#39;s drop event to upload files dragged from the desktop?

The problem I&#39;m having is that the `dragleave` event of an element is fired when hovering a child element of that element. Also, `dragenter` is not fired when hovering back the parent element again.

I made a simplified fiddle: http://jsfiddle.net/pimvdb/HU6Mk/1/.

HTML:

    &lt;div id=&quot;drag&quot; draggable=&quot;true&quot;&gt;drag me&lt;/div&gt;

    &lt;hr&gt;

    &lt;div id=&quot;drop&quot;&gt;
        drop here
        &lt;p&gt;child&lt;/p&gt;
        parent
    &lt;/div&gt;

with the following JavaScript:

    $(&#39;#drop&#39;).bind({
                     dragenter: function() {
                         $(this).addClass(&#39;red&#39;);
                     },
                     
                     dragleave: function() {
                         $(this).removeClass(&#39;red&#39;);
                     }
                    });
    
    $(&#39;#drag&#39;).bind({
                     dragstart: function(e) {
                         e.allowedEffect = &quot;copy&quot;;
                         e.setData(&quot;text/plain&quot;, &quot;test&quot;);
                     }
                    });

What it is supposed to do is notifying the user by making the drop `div` red when dragging something there. This works, but if you drag into the `p` child, the `dragleave` is fired and the `div` isn&#39;t red anymore. Moving back to the drop `div` also doesn&#39;t make it red again. It&#39;s necessary to move completely out of the drop `div` and drag back into it again to make it red.

Is it possible to prevent `dragleave` from firing when dragging into a child element?

**2017 Update:**  TL;DR, Look up CSS `pointer-events: none;` as described in @H.D.&#39;s answer below that works in modern browsers and IE11.

HTML5 dragleave fired when hovering a child element

I&#39;m wondering how to change during dragging (dragover/dragenter) icon/cursor when I dragenter for example to deny or allow section.
Of course, I can move with cursor a part of DOM positioned absolutely, but I&#39;m interested in native HTML5 solution.

Thanks!

HTML5 Drag &amp; Drop Change icon/cursor while dragging

I&#39;m trying to get a jQuery component similar to the one on [this site][1].

Basically, there is a list with available elements that you can drag and drop into several blocks.

I have quite a bit of JavaScript development experience, but I&#39;m quite new to jQuery, the language I want this to be scripted in.

Can you please lead me to some example similar to the one showed above, or give me some hints on what would be a good place to start looking for something like this?


  [1]: http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo2.html

Drag and drop elements from list into separate blocks

I am trying to figure out how to move the items in a pre-populated listbox up and down via mouse drags. 

I have looked at the Control.DoDragDrop method from microsoft&#39;s api, but I still can&#39;t get it to do anything. 

I would appreciate any help since I am new to the visual studios environment.

WPF C#: Rearrange items in listbox via drag and drop

I am trying to detect if a folder or a file is dragged in the **`dragover`** or **`dragenter`** events.

### For example:

In the `ondrop` event, there is an argument called `MouseEvent`, which has a field named `dataTransfer`, where are listed files (`.files`) or items (`.items`), depending on the browser, and I can read that in both [Chrome][1] and [Firefox][2]. However, for the `dragover` and `dragenter` events those fields (`.files` and `.items`) are empty. The problem is that **I need that information while dragging, not dropping**.

*NOTE: For both files and folders `event.dataTransfer.types[i] === &quot;Files&quot;` is `true`.*

### Background Research

I found [the following answer][3] to partially fit for my question: 

&gt; WebKit, and hence Chrome, is quite restrictive on when you can call `getData`. You&#39;re not allowed to do it inside `dragstart` or `dragover`. I think this is the canonical bug.

But that answer is from 2012, and **I can&#39;t find actual updated information on the topic**, so I am looking for updated information on this.

  [1]: http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available
  [2]: https://stackoverflow.com/questions/20378708/how-to-distinguish-folders-and-files-drag-and-drop-ajax-upload-in-firefox
  [3]: https://stackoverflow.com/a/9536533/2982225

How to distinguish if a file or folder is being dragged prior to it being dropped?

### The Setup

So, I have a contenteditable div -- I&#39;m making a WYSIWYG editor: bold, italics, formatting, whatever, and most lately: inserting fancy images (in a fancy box, with a caption).

    &lt;a class=&quot;fancy&quot; href=&quot;i.jpg&quot; target=&quot;_blank&quot;&gt;
        &lt;img alt=&quot;&quot; src=&quot;i.jpg&quot; /&gt;
        Optional Caption goes Here!
    &lt;/a&gt;

The user adds these fancy images with a dialog I present them with: they fill out the details, upload the image, and then much like the other editor functions, I use `document.execCommand(&#39;insertHTML&#39;,false,fancy_image_html);` to plop it in at the user&#39;s selection.

### Desired Functionality

So, now that my user can plop in a fancy image -- they need to be able to move it around.
The user needs to be able to click and drag the image (fancy box and all) to place it anywhere that they please within the contenteditable. They need to be able to move it between paragraphs, or even within paragraphs -- between two words if they want.

### What gives me hope

Keep in mind -- in a contenteditable, plain old **`&lt;img&gt;`** tags are already blessed by the user-agent with this lovely drag-and-drop capability. By default, you can drag and drop **`&lt;img&gt;`** tags around wherever you please; the default drag-and-drop operation behaves as one would dream.

So, considering how this default behavior already works so smashingly on our `&lt;img&gt;` buddies -- and I only want to extend this behaviour a little bit to include a tad more HTML -- this seems like something that should be easily possible.

## My Efforts Thus Far ##
First, I set up my fancy `&lt;a&gt;` tag with the draggable attribute, and disabled contenteditable (not sure if that&#39;s necessary, but it seems like it may as well be off):

    &lt;a class=&quot;fancy&quot; [...] draggable=&quot;true&quot; contenteditable=&quot;false&quot;&gt;

Then, because the user could still drag the image out of the fancy `&lt;a&gt;` box, I had to do some CSS. I&#39;m working in Chrome, so I&#39;m only showing you the -webkit- prefixes, though I used the others too.

    .fancy {
        -webkit-user-select:none;
        -webkit-user-drag:element; }
        .fancy&gt;img {
            -webkit-user-drag:none; }


Now the user can drag the whole fancy box, and the little partially-faded click-drag representation image reflects this -- I can see that I&#39;m picking up the entire box now :)

I&#39;ve tried several combinations of different CSS properties, the above combo seems to make sense to me, and seems to work best.

I was hoping that this CSS alone would be enough for the browser to use the entire element as the draggable item, automagically granting the user the functionality I&#39;ve been dreaming of... *It does however, appear to be more complicated than that.*

### HTML5&#39;s JavaScript Drag and Drop API
This Drag and Drop stuff *seems* more complicated than it needs to be.

So, I started getting deep into DnD api docs, and now I&#39;m stuck. So, here&#39;s what I&#39;ve rigged up (yes, jQuery):

	$(&#39;.fancy&#39;)
		.bind(&#39;dragstart&#39;,function(event){
			//console.log(&#39;dragstart&#39;);
			var dt=event.originalEvent.dataTransfer;
			dt.effectAllowed = &#39;all&#39;;
			dt.setData(&#39;text/html&#39;,event.target.outerHTML);
		});
	
	$(&#39;.myContentEditable&#39;)
		.bind(&#39;dragenter&#39;,function(event){
			//console.log(&#39;dragenter&#39;);
			event.preventDefault();
		})
		.bind(&#39;dragleave&#39;,function(event){
			//console.log(&#39;dragleave&#39;);
		})
		.bind(&#39;dragover&#39;,function(event){
			//console.log(&#39;dragover&#39;);
			event.preventDefault();
		})
		.bind(&#39;drop&#39;,function(event){
			//console.log(&#39;drop&#39;);		
			var dt = event.originalEvent.dataTransfer;
			var content = dt.getData(&#39;text/html&#39;);
			document.execCommand(&#39;insertHTML&#39;,false,content);
			event.preventDefault();
		})
		.bind(&#39;dragend&#39;,function(event){ 
			//console.log(&#39;dragend&#39;);
		});


**So here&#39;s where I&#39;m stuck:** This almost completely works. *Almost completely.* I have everything working, up until the very end. In the drop event, I now have access to the fancy box&#39;s HTML content that I&#39;m trying to have inserted at the drop location. All I need to do now, is insert it at the correct location!

The problem is **I can&#39;t find the correct drop location, or any way to insert to it.** I&#39;ve been hoping to find some kind of *&#39;dropLocation&#39;* object to dump my fancy box into, something like **`dropEvent.dropLocation.content=myFancyBoxHTML;`**, or perhaps, at least, some kind of drop location values with which to find my own way to put the content there?
*Am I given anything?*

*Am I doing it completely wrong? Am I completely missing something?*

I tried to use **`document.execCommand(&#39;insertHTML&#39;,false,content);`** like I expected I should be able to, but it unfortunately fails me here, as the selection caret is not located at the precise drop location as I&#39;d hope.

I discovered that if I comment out all of the **`event.preventDefault();`**&#39;s, the selection caret becomes visible, and as one would hope, when the user prepares to drop, hovering their drag over the contenteditable, the little selection caret can be seen running along between characters following the user&#39;s cursor and drop operation -- indicating to the user that the selection caret represents the precise drop location. **I need the location of this selection caret.**

With some experiments, I tried execCommand-insertHTML&#39;ing during the drop event, and the dragend event -- neither insert the HTML where the dropping-selection-caret was, instead it uses whatever location was selected prior to the drag operation.

*Because the selection caret is visible during dragover, I hatched a plan.*

For awhile, I was trying, in the dragover event, to insert a temporary marker, like `&lt;span class=&quot;selection-marker&quot;&gt;|&lt;/span&gt;`, just after `$(&#39;.selection-marker&#39;).remove();`, in an attempt for the browser to constantly (during dragover) be deleting all selection markers and then adding one at the insertion point -- essentially leaving one marker wherever that insertion point is, at any moment. The plan of course, was to then replace this temporary marker with the dragged content which I have.

None of this worked, of course: I couldn&#39;t get the selection-marker to insert at the apparently visible selection caret as planned -- again, the execCommand-insertedHTML placed itself wherever the selection caret was, prior to the drag operation.

## Huff. So what have I missed? How is it done? ##
**How do I obtain, or insert into, the precise location of a drag-and-drop operation?**
*I feel like this is, obviously, a common operation among drag-and-drops -- surely I must have overlooked an important and blatant detail of some kind?* Did I even have to get deep into JavaScript, or maybe there&#39;s a way to do this just with attributes like draggable, droppable, contenteditable, and some fancydancy CSS3?

I&#39;m still on the hunt -- still tinkering around -- I&#39;ll post back as soon as I find out what I&#39;ve been failing at :)

----------

## The Hunt Continues (edits after original post)

----------

Farrukh posted a good suggestion -- use:

    console.log( window.getSelection().getRangeAt(0) );

To see where the selection caret actually is. I plopped this into the **dragover** event, which is when I figure the selection caret is visibily hopping around between my editable content in the contenteditable.

**Alas, the Range object that is returned, reports offset indices that belong to the selection caret prior to the drag-and-drop operation.**

It was a valiant effort. Thanks Farrukh.

**So what&#39;s going on here?** I am getting the sensation that the little selection caret I see hopping around, isn&#39;t the selection caret at all! I think it&#39;s an imposter!

### Upon Further Inspection!

Turns out, it is an imposter! The **real** selection caret remains in place during the entire drag operation! You can see the little bugger!

I was reading [MDN Drag and Drop Docs][1], and found this:

&gt; Naturally, you may need to move the insertion marker around a dragover event as well. **You can use the event&#39;s clientX and clientY properties as with other mouse events to determine the location of the mouse pointer.**

Yikes, does this mean I&#39;m supposed to figure it out for myself, based on **clientX** and **clientY**?? Using mouse coordinates to determine the location of the selection caret myself? Scary!!

I&#39;ll look into doing so tomorrow -- unless myself, or somebody else here reading this, can find a sane solution :)

  [1]: https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

Precise Drag and Drop within a contenteditable

Using Visual studio 2010 I got problems when double-clicking, for example a config file (*.config). Visual Studio would open but give me a error message about parameters. If I simple try to drag and drop a file that Visual Studio usually can read in to it, the icon will give me the &quot;not possible icon&quot;?

I have now installed Visual Studio 2012 and it has the same problem?!

This makes my work a lot harder, it should be easy to just drag &amp; drop files into Visual Studio, but it&#39;s not so? Now I have to manually find the file with the file menu?

Please note, I have re-installed the computer before installing Visual Studio 2012.

Visual Studio does not let me drag drop items into it?

I am currently trying to implement the UITableView reordering behavior using UICollectionView.

Let&#39;s call a **UItableView TV** and a **UICollectionView CV** (to clarify the following explanation)

I am basically trying to reproduce the drag&amp;drop of the TV, but I am not using the edit mode, the cell is ready to be moved as soon as the long press gesture is triggered. It works prefectly, I am using the move method of the CV, everything is fine.

I update the contentOffset property of the CV to handle the scroll when the user is dragging a cell. When a user goes to a particular rect at the top and the bottom, I update the contentOffset and the CV scroll. The problem is when the user stop moving it&#39;s finger, the gesture doesn&#39;t send any update which makes the scroll stop and start again as soon as the user moves his finger.

This behavior is definitely not natural, I would prefer continu to scroll until the user release the CV as it is the case in the TV. The TV drag&amp;drop experience is awesome and I really want to reproduce the same feeling. Does anyone know how they manage the scroll in TV during reordering ?

- I tried using a timer to trigger a scroll action repeatedly as long as the gesture position is in the right spot, the scroll was awful and not very productive (very slow and jumpy).
- I also tried using GCD to listen the gesture position in another thread but the result is even worst.

I ran out of idea about that, so if someone has the answer I would marry him!

Here is the implementation of the longPress method:

    - (void)handleLongPress:(UILongPressGestureRecognizer *)sender
    {
        ReorganizableCVCLayout *layout = (ReorganizableCVCLayout *)self.collectionView.collectionViewLayout;
        CGPoint gesturePosition = [sender locationInView:self.collectionView];
        NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:gesturePosition];
    
        if (sender.state == UIGestureRecognizerStateBegan)
        {
            layout.selectedItem = selectedIndexPath;
            layout.gesturePoint = gesturePosition; // Setting gesturePoint invalidate layout
        }
        else if (sender.state == UIGestureRecognizerStateChanged)
        {
            layout.gesturePoint = gesturePosition; // Setting gesturePoint invalidate layout
            [self swapCellAtPoint:gesturePosition];
            [self manageScrollWithReferencePoint:gesturePosition];
        }
        else
        {
            [self.collectionView performBatchUpdates:^
            {
                layout.selectedItem = nil;
                layout.gesturePoint = CGPointZero; // Setting gesturePoint invalidate layout
            } completion:^(BOOL completion){[self.collectionView reloadData];}];
        }
    }

To make the CV scroll, I am using that method:

    - (void)manageScrollWithReferencePoint:(CGPoint)gesturePoint
    {
        ReorganizableCVCLayout *layout = (ReorganizableCVCLayout *)self.collectionView.collectionViewLayout;
        CGFloat topScrollLimit = self.collectionView.contentOffset.y+layout.itemSize.height/2+SCROLL_BORDER;
        CGFloat bottomScrollLimit = self.collectionView.contentOffset.y+self.collectionView.frame.size.height-layout.itemSize.height/2-SCROLL_BORDER;
        CGPoint contentOffset = self.collectionView.contentOffset;
    
        if (gesturePoint.y &lt; topScrollLimit &amp;&amp; gesturePoint.y - layout.itemSize.height/2 - SCROLL_BORDER &gt; 0)
            contentOffset.y -= SCROLL_STEP;
        else if (gesturePoint.y &gt; bottomScrollLimit &amp;&amp;
                 gesturePoint.y + layout.itemSize.height/2 + SCROLL_BORDER &lt; self.collectionView.contentSize.height)
            contentOffset.y += SCROLL_STEP;
    
        [self.collectionView setContentOffset:contentOffset];
    }



UICollectionView effective drag and drop

I would like to drag and drop my data file onto a Python script and have it process the file and generate output. The Python script accepts the name of the data file as a command-line parameter, but Windows Explorer doesn&#39;t allow the script to be a drop target.

Is there some kind of configuration that needs to be done somewhere for this work?


Drag and drop onto Python script in Windows Explorer

I am using this method http://jqueryui.com/demos/sortable/#connect-lists to connect two lists that i have. I want to be able to drag from list A to list B but when the item is dropped, i need to keep the original one still in list A. I checked the options and events but I believe there is nothing like that. Any approaches?

All Drag and-Drop Solutions on Gang of Coders

Total of 32 Drag and-Drop Solutions