6

Background

I am attempting to drag-and-drop a <div> element inside an <input> using the jQuery UI Draggable and Droppable components. At the moment, I have to place the caret in the position I would like the text to appear in and then drag-and-drop the <div> in to the <input>.

Question

I'm not 100% sure if this is possible to do but what I want to do is to have the caret update its position automatically as I drag the <div> between the text of the <input>.

jsFiddle example here...

CSS

.draggable
{
    width: 250px;
    height: 20px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}

.active
{
    border: 2px solid #6699ff;
}

#droppable
{
    font-size: 14pt;
    width: 400px;
}

#droppableHolder
{
    margin-top: 5em;
}

HTML

<div class="draggable">Text 1</div>
<div class="draggable">Text 2</div>
<div class="draggable">Text 3</div>
<div class="draggable">Text 4</div>
<div id="droppableHolder">
    Drop in the text box below:<br />
    <br />
    <input type="text" id="droppable" value="INSERT ANYWHERE" />
</div>​

Javascript

$(".draggable").draggable({
    revert: true,
    //revert: false,
    helper: 'clone',
    start: function(event, ui) {
        $(this).fadeTo('fast', 0.5);
        //$(this).css('cursor', 'text');
        //$(this).hide();
    },
    stop: function(event, ui) {
        $(this).fadeTo(0, 1);
        //$(this).show("explode", { pieces: 16 }, 2000);
    }
});

$("#droppable").droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
        //this.value += $(ui.draggable).text();
        //alert($("#droppable"));
        insertAtCaret("droppable", $(ui.draggable).text());
    },
    over: function(event, ui) {
        //$(this).css('cursor', 'text');
    }
});

function insertAtCaret(areaId,text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}
​

jsFiddle example here...

1
  • I know you can control the caret position with javascript so it sounds to me like it would be completely possible. I found this link for changing the position of the careet: caret position Sep 13, 2012 at 2:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.