user3588247 user3588247 -4 years ago 83
Javascript Question

Drop elements into text box using jqeuery

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download