When I drag li elements into the textbox, they are arranged in the middle. How can I arrange these elements at the beginning? I am using Foundation.
Is there a possible issue?
This is my jQuery code:
<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;
}
Here is the 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>
Can someone assist me with this? Please help...
<p><b>Tags:</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>