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

【问题标题】：Drop elements into text box using jQuery使用 jQuery 将元素拖放到文本框中
【发布时间】：2014-05-06 13:51:37
【问题描述】：

当我将一个 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>

【问题讨论】：

你能发布渲染的html，而不是php吗？
这将使我们更容易测试您正在使用的代码。
你可以在这里找到html
你已经发布了 php.ini 文件。请查看源代码，复制和粘贴。我们无法从您发布的内容中看到 html。
我已经发布了html

标签： javascript jquery css jquery-ui

【解决方案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

【讨论】：

没问题 - 很乐意提供帮助。
但是如果元素被拖拽怎么删除呢？
如果文本再次被删除，您要删除它吗？
我已经修改它以适应它。因为这不是问题的一部分，所以我不会在我的答案中发布它......jsfiddle.net/ArchersFiddle/BY9Dj/1

【解决方案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(),''));
                    }
                }
            });

【讨论】：