JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="drag" draggable="true" class="disable-selection">
    <label>Drag this div</label>
    <br />
    <div>
       <input id="message" type="text" value="Try and selecting me in firefox. Or try to put the cursor in the middle." style="width: 100%" />
    </div>
</div>
<div id="drop">
    Drop area
</div>

CSS

.disable-selection {
    -webkit-user-select: none; // event if it's not necessary, let's just add it
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

JavaScript

$('#drag[draggable=true]').on('dragstart', function(e){
    e.originalEvent.dataTransfer.setData('Text', $('#message').val());
    e.originalEvent.dataTransfer.effectAllowed = 'move';
});

var drop = $('#drop');
drop.on('dragover', function(e){
    e.preventDefault();
});
drop.on('dragenter', function(e){
    e.preventDefault();
});
drop.on('drop', function(e){
    alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));
    e.preventDefault();
});

    $('#message')
        .on('focus', function(e) {
            $(this).closest('#drag').attr("draggable", false);
        })
        .on('blur', function(e) {
            $(this).closest('#drag').attr("draggable", true);
        });