Question

我正在尝试在其中创建一个带有可拖动和可排序（jQuery UI）div的功能文本框。我希望用户能够编写文本并让可拖动项目向右移动，就像文本一样。这是我要做的事情的模型：

enter image description here

在这里，您可以看到三个下拉菜单，可以在文本框中的任何位置拖动，文本将它们分开。

我在基本的可拖动/可排序方面取得了很好的进展，但是将它们放在文本框中并像文本一样对待会变得更加困难。

这甚至可能吗？

代码：

<div class="demo">
        <div id="sortable" class="ui-state-default">
            <div id="draggable1" class="ui-state-default draggable">
                <select>
                    <option>1</option>
                    <option>10</option>
                    <option>100</option>
                </select>
            </div>
            <div id="draggable2" class="ui-state-default draggable">
                <select>
                    <option>1</option>
                    <option>10</option>
                    <option>100</option>
                </select>
            </div>
            <div id="draggable3" class="ui-state-default draggable">
                <select>
                    <option>1</option>
                    <option>10</option>
                    <option>100</option>
                </select>
            </div>
        </div>
    </div>

dvdv

<style>
    .draggable {
        height: 35px;
    }

    #draggable1 {
        width: 45px;
    }

    #draggable2 {
        width: 150px;
    }

    #draggable3 {
        width: 150px;
    }

    #sortable {
        width: 356px;
        height: 35px;
        text-align: center;
        display: table;
        overflow: hidden;
        padding:0;
        margin:0;
    }

    #sortable > div {
        float: left;
    }
</style>


<script>
        $(function () {
            $("#sortable").sortable({
                revert: true
            });
        });
    </script>

Answer 1

几点：

1）正如你的标题所说＆＃34;在文本框中＆＃34;我看到你的标记中没有文本框

2）如果你要写和更改东西以及拖放，为什么不使用

conteneditable

html中div的

属性，你可以做elastic textbox中通常会做的所有操作，但仍然是div

3）并且不！你不能使用简单的文本框作为DOM元素的容器！

在html中查看w3schools contenteditable

希望有所帮助

文本框中的可拖动/可排序项目

1 个答案: