Question

我想把我的div从我的第一个ul移到一个有两个（或更多）ul：s的容器中。或多或少我想创建一种画板，在其中我可以放置不同颜色的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，但你引用它作为＆＃39; .sortlist＆＃39;而不是＃sortlist＆＃39;＃sortlist＆＃39;在jquery，所以我修复了，但它仍然没有工作。然后我从jQuery的可拖动示例页面添加了原始脚本标记，现在看起来事情似乎正在拖延。最后我添加了

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

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如何移动我的divs＆＃34; sideways＆＃34;从一个ul到另一个使用可分类和/或可拖动？

1 个答案: