如何使用可排序和/或可拖动将我的 div "sideways"从一个 ul 移动到另一个 ul？

Question

我想把我的div从我的第一个ul移动到一个有两个(或更多)ul的容器。或多或少，我想创建一种画板，我可以在其中放置不同颜色的div，以制作一种像素艺术作品。现在，这是我为了理解如何做到这一点而准备的试用代码，但当然它不起作用……这是jsfiddle: https://jsfiddle.net/4sats5oe/24/

代码如下:

HTML

<div id="box">
<ul class="boxlist">
    <li class="line"><div></div></li>
    <li class="line"><div></div></li>
    <li class="line"><div></div></li>
</ul>
<ul class="boxlist">
    <li class="line"></li>
    <li class="line"></li>
    <li class="line"></li>
</ul>
</div>
<ul id="sortlist">
<li class="sort"><div class="small"></div></li>
<li class="sort"><div class="small"></div></li>
<li class="sort"><div class="small"></div></li>
</ul>

CSS

#box {
height: 200px;
width: 200px;
border: 1px solid black;
}
.boxlist {
list-style-type: none;
float: left;
padding: 0px;
display: inline;
}
.line {
height: 50px;
width: 50px;
border: 1px solid black;
}
.small {
height: 50px;
width: 50px;
border: 1px solid black;
background-color: blue;
}
#sortlist {
list-style-type: none;
padding: 0px;
}

JS

 $(".boxlist").sortable({
cursor: "move",
placeholder: 'emptydiv'
});

 $(".sortlist").draggable({
 helper: "clone",
 revert: "invalid",
 connectToSortable: ".boxlist"
 });

有人知道怎么做吗?谢谢!

Answer 1

我注意到一些事情，首先你的排序列表ul是一个id，但你引用它为'。sortlist'而不是jquery中的'#sortlist'，所以我修复了这个问题，但它仍然不起作用。然后我从jQuery的可拖拽示例页面中添加了原始脚本标签，现在事情似乎可以正确拖拽了。最后我添加了

.sort {
    list-style-type: none;    
}

防止方框在拖动时变成列表。它似乎仍然没有达到预期的效果，但我希望它能让你开始:

$(".boxlist").sortable({
    cursor: "move",
    placeholder: 'emptydiv'
}); 
$("#sortlist").draggable({
     helper: "clone",
     revert: "invalid",
     connectToSortable: ".boxlist"
});

#box {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}
.sort {
    list-style-type: none;    
}
.boxlist {
    list-style-type: none;
    float: left;
    padding: 0px;
    display: inline;
}
.line {
    height: 50px;
    width: 50px;
    border: 1px solid black;
}
.small {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    background-color: blue;
}
#sortlist {
    list-style-type: none;
    padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="box">
    <ul class="boxlist">
        <li class="line"><div></div></li>
        <li class="line"><div></div></li>
        <li class="line"><div></div></li>
    </ul>
    <ul class="boxlist">
        <li class="line"></li>
        <li class="line"></li>
        <li class="line"></li>
    </ul>
</div>
<ul id="sortlist">
    <li class="sort"><div class="small"></div></li>
    <li class="sort"><div class="small"></div></li>
    <li class="sort"><div class="small"></div></li>
</ul>