Drop elements into text box using jQuery

Question

When I drop an li elements into textbox it arranges in the middle...How to arrange this elements at beginning? I use Foundation

There may be a problem?

My jQuery:

<script type="text/javascript">
    $(function() {
        $("#dragdiv li").draggable({
            helper: "clone",
            cursor: "move",
            revert: "invalid"
        });

        initDroppable($("#dropdiv"));
        function initDroppable($elements) {
            $elements.droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-drop-hover",
                accept: ":not(.ui-sortable-helper)",

                over: function(event, ui) {
                    var $this = $(this);
                },
                drop: function(event, ui) {
                    var $this = $(this);
                    if ($this.val() == '') {
                        $this.val(ui.draggable.text());
                    } else {
                        $this.val($this.val() + "," + ui.draggable.text());
                    }
                }
            });
        }
    });
</script>

<style type="text/css">
    #dropdiv ul
    {
        display: inline-block !important;
        float: left;
    }
    #dragdiv ul{
        margin-top:20px; 
    }

</style>

Html:

<p><b>Tags:</b></p>

<input id="dropdiv" type="text" style="overflow:scroll;width:605" />

<div id="dragdiv">
    <?php if($tags): ?>
    <ul id="allItems">
        <?php foreach($tags as $t): ?>
        <li id="node" runat="server">
            <?php echo $t['name'] ?>
        </li>
        <?php endforeach; ?>
    </ul>
    <?php endif; ?>  
</div>  

How to make this?Help me please.....

<p><b>Taguri:</b></p>

<input id="dropdiv" type="text" style="width:605" />

<div id="dragdiv">
    <ul id="allItems">
        <li id="node" runat="server">
            first tag                           </li>
        <li id="node" runat="server">
            second tag                          </li>
        <li id="node" runat="server">
            third tag                           </li>
    </ul>

</div>                

Answer 1

You've got a bunch of tabs inside each of the li elements, around the text, and they are getting copied as well.

Change the php so there are no tabs...

<li id="node" runat="server"><?php echo $t['name'] ?></li>

Alternatively, change the drop function to this...

drop: function (event, ui) {
    var $this = $(this);
    if ($this.val() == '') {
        $this.val(ui.draggable.text().trim());
    } else {
        $this.val($this.val() + "," + ui.draggable.text().trim());
    }
}

Notice I've added trim() to get rid of leading and trailing whitespace.

working jsfiddle example

Answer 2

I've modified your code. This code appends items to the list.

HTML

<h2>Drag from here</h2>
<div id="dragdiv">
    <ul id="allItems">
        <li class="node" runat="server">Tag 1</li>
        <li class="node" runat="server">Tag 2</li>
        <li class="node" runat="server">Tag 3</li>
    </ul>
</div> 

<h2>Drop here</h2>
<input id="dropdiv" type="text" style="width:605" />

JQuery

        $("#dragdiv li").draggable({
            helper: "clone",
            cursor: "move",
            revert: "invalid"
        });

        $( "#dropdiv" ).droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-drop-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function(event, ui) {
                    var $this = $(this);
                    if($this.val().indexOf(ui.draggable.text()) < 0 ) {
                        if ($this.val() == '') {
                            $this.val(ui.draggable.text());
                        } else {
                            $this.val($this.val() + "," + ui.draggable.text());
                        }
                    }else{
                        $this.val($this.val().replace(ui.draggable.text(),''));
                    }
                }
            });