Question

当我从左边抓住任何<li＆gt; ...并尝试将其拖到右中间并将鼠标放在它上面而不放开我的鼠标时，它会不断闪烁。如果我放手它也不起作用（它不一致）。例如：

1 2

3 4

5 6

当我将＃1，＃3或＃5拖到＃4时，在我放开之前，它会闪烁。我的HTML有问题吗？当网站上的演示没有这样做时，我不明白为什么会这样做：http://farhadi.ir/projects/html5sortable/（找到可排序的网格）

HTML：

    <ul class="sorted_list clearfix">
        <li>
                <div>
                <img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" />
                <span>Collection Name1</span><br>
                <span>Lorem ipsum sdfsfdsfs sdfdsfsdfds </span>

                </div>
            </li>
            <li>
                <div>
                <img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" />
                <span>Collection Name2</span><br>
                <span>Lorem ipsum sdfsfdsfs sdfdsfsdfds </span>

                </div>
            </li>
            <li>
                <div>
                <img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" />
                <span>Collection Name3</span><br>
                <span>Lorem ipsum sdfsfdsfs sdfdsfsdfds </span>

                </div>
            </li>
            <li>
                <div>
                <img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" />
                <span>Collection Name4</span><br>
                <span>Lorem ipsum sdfsfdsfs sdfdsfsdfds </span>

                </div>
            </li>
            <li>
                <div>
                <img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" />
                <span>Collection Name5</span><br>
                <span>Lorem ipsum sdfsfdsfs sdfdsfsdfds </span>

                </div>
            </li>
            <li>
                <div>
                <img alt="Mmmm" class="col_images" src="http://freepicsoft.com/wp-content/uploads/2014/02/mmmm.jpg" />
                <span>Collection Name6</span><br>
                <span>Lorem ipsum sdfsfdsfs sdfdsfsdfds </span>

                </div>
            </li>

CSS：

.sorted_list {
    width: 650px;
}

.sorted_list li {
    list-style: none;
    margin: 5px;
    line-height: 60px;
    float: left;
    width: 250px;
}

.col_images {
    max-width: 60px;
    ma-height: 60px;
}

JS：

$(".sorted_list").sortable();

Answer 1

必须添加height：

height: 100px;

jQuery + HTML5可排序：当我拖放时，越野车和闪烁

1 个答案: