Question

我正在开发一个wysiwyg，DnD（拖放），html5和javascript中的文本编辑器。

我正在使用新的html5sortable库。我有一个似乎没有解决的问题。我想让DnD和内容的一些元素可编辑。排序插件工作和所需元素是可排序的，但可排序类元素的行为内容不可编辑。

我错过了什么？

<html>
<head>
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery.sortable.js"></script>

    <style>
    li.sortable-placeholder {
        border: 1px dashed #CCC;
        background: none;
    }
    </style>
</head>

<body>
    <h2>Title</h2>
    <div class="sortable">
        <div contenteditable="true">Item 1</div>
        <div contenteditable="true">Item 2</div>
        <div contenteditable="true">Item 3</div>
        <div contenteditable="true">Item 4</div>
    </div>
    <div contenteditable="true">Item editable</div>

    <script>
    $('.sortable').sortable({

    }).bind('sortupdate', function(e, ui){
    });

    </script>

</body>

我尝试处理，但仍然没有使内容可编辑：

    <!doctype html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Sortable jQuery Plugin</title>
  <link href="http://thomasf.github.io/solarized-css/solarized-light.min.css" rel="stylesheet"></link>
    <style>
        header, section {
            display: block;
        }
        #features {
            margin: auto;
            width: 460px;
            font-size: 0.9em;
        }
        .connected, .sortable, .exclude, .handles {
            margin: auto;
            padding: 0;
            width: 310px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .sortable.grid {
            overflow: hidden;
        }
        .connected li, .sortable li, .exclude li, .handles li {
            list-style: none;
            border: 1px solid #CCC;
            background: #F6F6F6;
            font-family: "Tahoma";
            color: #1C94C4;
            margin: 5px;
            padding: 5px;
            height: 22px;
        }
        .handles span {
            cursor: move;
        }
        li.disabled {
            opacity: 0.5;
        }
        .sortable.grid li {
            line-height: 80px;
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
        }
        li.highlight {
            background: #FEE25F;
        }
        #connected {
            width: 440px;
            overflow: hidden;
            margin: auto;
        }
        .connected {
            float: left;
            width: 200px;
        }
        .connected.no2 {
            float: right;
        }
        li.sortable-placeholder {
            border: 1px dashed #CCC;
            background: none;
        }
    </style>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
</head>

<body>
    <section>
        <h2>Sortable List With Handles</h2>
        <ul class="handles list">
            <li contenteditable="true"><span>::</span> Item 1</li>
            <li contenteditable="true"><span>::</span> Item 2</li>
            <li contenteditable="true"><span>::</span> Item 3</li>
            <li contenteditable="true"><span>::</span> Item 4</li>
            <li contenteditable="true"><span>::</span> Item 5</li>
            <li contenteditable="true"><span>::</span> Item 6</li>
        </ul>
    </section>

    <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script> -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="../src/html.sortable.js"></script>
    <script>
        $(function() {
            $('.handles').sortable({
                handle: 'span'
            });
        });
    </script>
</body>
</html>

Answer 1

查看html5 sortable网站上的示例代码，问题出现在[role]属性上。如果你删除它会工作，我想这可能是库添加了该属性？

e.g。尝试在JavaScript控制台上运行：

$("li").attr("contentEditable", "true");

然后 - 让它发挥作用：

$("li").removeAttr("role");

请注意，dragstart和selectionstart事件无法区分，因此您无法选择可编辑文本（它会启动拖动）。

DnD元素无法进行内容编辑

1 个答案: