It&#39;s working fine, it&#39;s just a bug with the console.

    function onDrop(event) {
        event.preventDefault();
        console.log(event.dataTransfer.files[0]);
    }

Also take a look at this bug/behavior: https://stackoverflow.com/questions/8414154/

Basically, you need to handle hover/drag and specify a dropEffect

I found what I needed in:

    e.originalEvent.dataTransfer

After reading the [documentation on `logging`](http://docs.python.org/py3k/library/logging.html#module-logging), I know I can use code like this to perform simple logging:

    import logging
        
    def main():
        logging.basicConfig(filename=&quot;messages.log&quot;,
                            level=logging.WARNING,
                            format=&#39;%(filename)s: &#39;    
                                    &#39;%(levelname)s: &#39;
                                    &#39;%(funcName)s(): &#39;
                                    &#39;%(lineno)d:\t&#39;
                                    &#39;%(message)s&#39;)
    
        logging.debug(&quot;Only for debug purposes\n&quot;)
        logging.shutdown()
    
    main()

However, I realised I don&#39;t know how to change the format of log messages on a per-logger basis, since `basicConfig` is a module-level function. This code works for creating different loggers with different levels, names, etc. but is there a way to change the format of those log messages on a per-logger basis as well, in a way similar to `basicConfig`?

    import inspect
    import logging
    
    def function_logger(level=logging.DEBUG):
        function_name = inspect.stack()[1][3]
        logger = logging.getLogger(function_name)
        logger.setLevel(level)
        logger.addHandler(logging.FileHandler(&quot;{0}.log&quot;.format(function_name)))
        return logger
    
    def f1():
        f1_logger = function_logger()
        f1_logger.debug(&quot;f1 Debug message&quot;)
        f1_logger.warning(&quot;f1 Warning message&quot;)
        f1_logger.critical(&quot;f1 Critical message&quot;)
    
    def f2():
        f2_logger = function_logger(logging.WARNING)
        f2_logger.debug(&quot;f2 Debug message&quot;)
        f2_logger.warning(&quot;f2 Warning message&quot;)
        f2_logger.critical(&quot;f2 Critical message&quot;)
    
    def main():
        f1()
        f2()
        logging.shutdown()
    
    main()




How do I change the format of a Python log message on a per-logger basis?

I have a table with the following data:

    Pk_Id  ProductName           Fk_CompanyId       Price
    ------------------------------------------------------
    1      AMX                   1                  10.00
    2      ABC                   1                  11.00
    3      APEX                  1                  12.00
    4      AMX                   1                  10.00
    5      ABC                   1                  11.00
    6      APEX                  1                  12.00
    7      AMX                   2                  10.00
    8      ABC                   2                  11.00
    9      APEX                  2                  12.00

I want to generate Insert script for migrating records whose Fk_CompanyId is 1.

There is an insert script option to generate script for all records but I want to filter some records to migrate to another database.



Generate insert script for selected records?

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?

<p>Okay, I have an element set up to receive a file-drop event, but when I look in <code>event.dataTransfer</code> it is blank. I haven't gotten around to learning the drag-n-drop HTML5 API just yet and am still a little foggy on it. I'm working on it at <a href="http://southshift.com/backstage/" target="_blank" rel="noopener noreferrer">my site</a>. If you wouldn't mind poking around my code and seeing what's going on, it would be highly appreciated. The entire <code>event</code> object is being logged.</p>


&lt;!-- language-all: lang-js --&gt;

The `scripts` portion of my `package.json` currently looks like this:

    &quot;scripts&quot;: {
        &quot;start&quot;: &quot;node ./script.js server&quot;
    }

...which means I can run `npm start` to start the server. So far so good.

However, I would like to be able to run something like `npm start 8080` and have the argument(s) passed to `script.js` (e.g. `npm start 8080` =&gt; `node ./script.js server 8080`). Is this possible?

Sending command line arguments to npm script

I&#39;m trying to add pages to my list. I followed the AngularJS tutorial, the one about smartphones and I&#39;m trying to display only certain number of objects. Here is my html file:

	  &lt;div class=&#39;container-fluid&#39;&gt;
		&lt;div class=&#39;row-fluid&#39;&gt;
			&lt;div class=&#39;span2&#39;&gt;
				Search: &lt;input ng-model=&#39;searchBar&#39;&gt;
				Sort by: 
				&lt;select ng-model=&#39;orderProp&#39;&gt;
					&lt;option value=&#39;name&#39;&gt;Alphabetical&lt;/option&gt;
					&lt;option value=&#39;age&#39;&gt;Newest&lt;/option&gt;
				&lt;/select&gt;
				You selected the phones to be ordered by: {{orderProp}}
			&lt;/div&gt;

			&lt;div class=&#39;span10&#39;&gt;
			  &lt;select ng-model=&#39;limit&#39;&gt;
				&lt;option value=&#39;5&#39;&gt;Show 5 per page&lt;/option&gt;
				&lt;option value=&#39;10&#39;&gt;Show 10 per page&lt;/option&gt;
				&lt;option value=&#39;15&#39;&gt;Show 15 per page&lt;/option&gt;
				&lt;option value=&#39;20&#39;&gt;Show 20 per page&lt;/option&gt;
			  &lt;/select&gt;
			  &lt;ul class=&#39;phones&#39;&gt;
				&lt;li class=&#39;thumbnail&#39; ng-repeat=&#39;phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit&#39;&gt;
					&lt;a href=&#39;#/phones/{{phone.id}}&#39; class=&#39;thumb&#39;&gt;&lt;img ng-src=&#39;{{phone.imageUrl}}&#39;&gt;&lt;/a&gt;
					&lt;a href=&#39;#/phones/{{phone.id}}&#39;&gt;{{phone.name}}&lt;/a&gt;
					&lt;p&gt;{{phone.snippet}}&lt;/p&gt;
				&lt;/li&gt;
			  &lt;/ul&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	  &lt;/div&gt;

I&#39;ve added a select tag with some values in order to limit the number of items that will be displayed. What I want now is to add the pagination to display the next 5, 10, etc.

I have a controller that works with this:

    function PhoneListCtrl($scope, Phone){
    	$scope.phones = Phone.query();
    	$scope.orderProp = &#39;age&#39;;
    	$scope.limit = 5;
    }

And also I have a module in order to retrieve the data from the json files.

    angular.module(&#39;phonecatServices&#39;, [&#39;ngResource&#39;]).
    	factory(&#39;Phone&#39;, function($resource){
    		return $resource(&#39;phones/:phoneId.json&#39;, {}, {
    			query: {method: &#39;GET&#39;, params:{phoneId:&#39;phones&#39;}, isArray:true}
    		});
    	});

Pagination on a list using ng-repeat

&gt; **Possible Duplicate:**  
&gt; [How to get &amp;ldquo;GET&amp;rdquo; request parameters in JavaScript?](https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript)  
&gt; [jQuery querystring](https://stackoverflow.com/questions/3788125/jquery-querystring)  
&gt; [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript)

&lt;!-- End of automatically inserted text --&gt;

Javascript does not provide a core method to do that, so how to do it?

How to get URL parameters with Javascript?

I&#39;m trying to add the [Ace editor][1] to a page, but I don&#39;t know how to get the height to be set automatically based on the length of its contents.

Ideally it would work so when the content changes the height is recalculated, but I would be happy with the height just being set on page load.

For a JavaScript novice can someone help me figure out how I work out the length of the code, how many lines it spans, what the new height is and how I update the DOM to reflect this?

I found [this suggestion][2] in a Google group, but I don&#39;t really understand what it&#39;s doing and how I get it to adjust the height.

    editor.getSession().getDocument().getLength() *
    editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()

  [1]: http://ace.ajax.org
  [2]: https://groups.google.com/d/msg/ace-discuss/qM32mQ6jKQ8/bQK3nxWuB80J


Automatically adjust height to contents in Ace Cloud 9 editor

I am trying to change a hashed URL (document.location.hash) with the replace method, but it doesn&#39;t work.

    $(function(){
     var anchor = document.location.hash;
     //this returns me a string value like &#39;#categories&#39;

      $(&#39;span&#39;).click(function(){

         $(window).attr(&#39;url&#39;).replace(anchor,&#39;#food&#39;);
         //try to change current url.hash &#39;#categories&#39;
         //with another string, I stucked here.
      });

    });

I dont want to change/refresh page, I just want to replace URL without any responses.

Note: I don&#39;t want to solve this with a href=&quot;#food&quot; solution.

How can I replace a window&#39;s URL hash with another response?

I&#39;m new to HTML5 as begun to work with HTML5&#39;s new form input fields. When I&#39;m working with form input fields, especially `&lt;input type=&quot;text&quot; /&gt;` and `&lt;input type=&quot;search&quot; /&gt;` IMO there wasn&#39;t any difference in all major browser including Safari, Chrome, Firefox and Opera. And the search field also behaves like a regular text field.

So, what is the difference between `input type=&quot;text&quot;` and `input type=&quot;search&quot;` in HTML5?

What is the real purpose of `&lt;input type=&quot;search&quot; /&gt;`?


input type=&quot;text&quot; vs input type=&quot;search&quot; in HTML5

How can I post values from a multiple select in a form? When I hit submit none of the selected  values are posted.


    &lt;form id=&quot;form&quot; action=&quot;&quot; method=&quot;post&quot;&gt;
        &lt;div&gt;
            &lt;select id=&quot;inscompSelected&quot; multiple=&quot;multiple&quot; class=&quot;lstSelected&quot;&gt;
                &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;				
            &lt;/select&gt;
            &lt;input type=&quot;submit&quot; value=&quot;submit&quot;&gt;
        &lt;/div&gt;
    &lt;/form&gt;


Post values from a multiple select

This is crazy but I don&#39;t know how to do this, and because of how common the words are, it&#39;s hard to find what I need on search engines. I&#39;m thinking this should be an easy one to answer.

I want a simple file download, that would do the same as this:

    &lt;a href=&quot;file.doc&quot;&gt;Download!&lt;/a&gt;

But I want to use an HTML button, e.g. either of these:

    &lt;input type=&quot;button&quot; value=&quot;Download!&quot;&gt;
    &lt;button&gt;Download!&lt;/button&gt;

Likewise, is it possible to trigger a simple download via JavaScript?

    $(&quot;#fileRequest&quot;).click(function(){ /* code to download? */ });

I&#39;m definitely *not* looking for a way to create an anchor that looks like a button, use any back-end scripts, or mess with server headers or mime types.

How to trigger a file download when clicking an HTML button or JavaScript

I was looking for possibility to create QR code reader in my HTML5 based web page. I&#39;ve done some googling and all the links point me to the mobile applications. 

Please help me with some pointers as to how I can use HTML5 and JavaScript to read a QR code containing a url and then redirect the browser to that URL.

How to create a QR code reader in a HTML5 website?

I have this code(which doesn&#39;t give me expected result)

    #subject_content.html
    {% block main-menu %}
    	{% include &quot;subject_base.html&quot; %}
    {% endblock %}
    

    #subject_base.html
    ....
    ....
    	&lt;div id=&quot;homework&quot; class=&quot;tab-section&quot;&gt;
    		&lt;h2&gt;Homework&lt;/h2&gt;
    			{% include &quot;subject_file_upload.html&quot; %}
    	&lt;/div&gt;
child template:
    
    #subject_file_upload.html
    	&lt;form action=&quot;.&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;{% csrf_token %}
    		{{ form.as_p }}
    		&lt;input type=&quot;submit&quot; value=&quot;submit&quot;&gt;
    	&lt;/form&gt;

and my view

    #views.py
    @login_required
    def subject(request,username, subject):
        if request.method == &quot;POST&quot;:
            form = CarsForm(request.POST, request.FILES)
            if form.is_valid():
                form.save()
                return HttpResponseRedirect(&quot;/&quot;)
        form = CarsForm()
        return render_to_response(&#39;subject_content.html&#39;, {&#39;form&#39;:form}, context_instance=RequestContext(request))

The above code creates HTML in the way I want it to be, however the form does not update database.

BUT,

If I skip the middle template and go directly to the uploading form, it works fine:

    #subject_content.html
    {% block main-menu %}
    	{% include &quot;subject_file_upload.html&quot; %}
    {% endblock %}

Help me please to make it work with middle template. 
I want to do this, because I don&#39;t wan&#39;t to type the same code more than once. 



Assign variables to child template in {% include %} tag Django

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 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

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

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

### 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.

Content Type	Original Author	Original Content on Stackoverflow
Question	nkcmr	View Question on Stackoverflow
Solution 1 - Javascript	Esailija	View Answer on Stackoverflow
Solution 2 - Javascript	WFW	View Answer on Stackoverflow
Solution 3 - Javascript	Andrew	View Answer on Stackoverflow

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

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Generate insert script for selected records?

How do I change the format of a Python log message on a per-logger basis?

Attributions