Question

当我将li元素放入文本框时，它会在中间排列......如何在开头安排这些元素？我使用基金会

可能有问题？

我的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>

如何制作？请帮帮我.....

<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

在文本周围的每个li元素中都有一堆标签，并且它们也会被复制。

更改php以便没有标签...

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

或者，将drop功能更改为此...

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());
    }
}

注意我添加了trim()以摆脱前导空格和尾随空格。

<强> working jsfiddle example

Answer 2

我修改了你的代码。此代码将项目附加到列表中。

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(),''));
                    }
                }
            });

使用jQuery将元素拖放到文本框中

2 个答案:

HTML

JQuery的