Question

目标：

我正在尝试预览网页中可排序列表的打印结果。

代码目标：

下面的代码克隆了当可排序列表的高度与其父容器的高度匹配时创建的第一个“页面”，这可以通过将更多可排序对象拖动到第一个列表上方来实现。

问题：

所需的结果可用于“页面”的第一次重新创建，但是当将更多可排序的对象拖到代码上时，将继续创建“页面”的克隆。

$(function() {



$(".draggableobject").draggable({

stop: function(){
if ($(".sortnewdiv").height() == $("#Container").height()){
   $('#Container').clone().find('.sortable li').remove().end().appendTo("#sidearea");
   
$("#Container").removeClass("sortnewdiv");
}
},
connectToSortable: ".sortable"
});



$(".sortable").sortable({ 
cancel: 'input,textarea,button,select,option,[contenteditable]'
});

    
    
    
});

#Button{
 margin-bottom:1%;
}

#firstContainer{
background-color: white;
height:160px;
box-shadow: 0px 0px 2px 0px #000;
overflow: hidden;
width: 45%;
float: left;
}

#Container{
background-color: white;
height:200px;
margin-bottom: 5%;
box-shadow: 0px 0px 2px 0px #000;
overflow: hidden;
width: 100%;
}

.draggableobject{
 height: 40px;
}

.editable{
width: 75%;
height: 100%;
float:left;
}

.move{
width:25%;
height: 100%;
float:left;
background-color: black;
box-shadow: 0px 0px 2px 0px grey;
}



#sidearea{
width: 45%;
float: left;
margin-left: 10%;
}


ul {
height: 100%;
list-style: none;
padding: 0;
margin: 0;
}


.sortable li{
height: 40px;
background-color: grey;
box-shadow: 0px 0px 1px 0px #000;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="parentdiv">

 <div id="firstContainer">
 <ul id="draggable">
 <li class="draggableobject">5</li>
 <li class="draggableobject">6</li>
 <li class="draggableobject">7</li>
 <li class="draggableobject">8</li>
 </ul>
 </div>
 <div id="sidearea">
 <div id="Container" class="first sortnewdiv">
 <ul class="sortable">
 <li><div class="editable" contentEditable = "true">1</div><div class="move"></div></li>
 <li><div class="editable" contentEditable = "true">2</div><div class="move"></div></li>
 <li><div class="editable" contentEditable = "true">3</div><div class="move"></div></li>
 <li><div class="editable" contentEditable = "true">4</div><div class="move"></div></li>
 </ul>
 </div>



</div>

Answer 1

在这里我使用了另一种方法。我创建了一个函数adjust_pages()，每次我们对元素进行排序或拖动时都会调用该函数。因此，基本上，每次页面内容更改时都可以调用它。此函数遍历每个页面，并根据您要查找的行为（例如Microsoft Word）重新定位元素。如果需要，它还将删除或添加页面。查看功能中的注释以了解我的工作方式。

$(function() {
    make_sortable();
    make_draggable();
});
function make_sortable(){
    $(".sortable").sortable({ 
        connectWith: ['.sortable'],
        stop: function(){
            adjust_pages();
        },
        cancel: 'input,textarea,button,select,option,[contenteditable]'
    });
}
function make_draggable(){
    $(".draggableobject").draggable({
        stop: function(){
            if($('#draggable > li').length == 0){
                $('#draggable').append('<li style="height:'+(30+Math.random()*80)+'px;" class="draggableobject">'+$('li').length+'</li>');
                $('#draggable').append('<li style="height:'+(30+Math.random()*80)+'px;" class="draggableobject">'+$('li').length+'</li>');
                $('#draggable').append('<li style="height:'+(30+Math.random()*80)+'px;" class="draggableobject">'+$('li').length+'</li>');
                make_draggable();
            }
            adjust_pages();
        },
        connectToSortable: ".sortable"
    });
}
function adjust_pages(){
    $('.page').each(function(i,e){
        // while{ the first element of this page fits in the previous page, send it to the previous page} 
        if(i > 0){
            while($($('.page > ul')[i]).find('li').length > 0 && $($('.page')[i-1]).height()-$($('.page > ul')[i-1]).height() >= $($($('.page > ul')[i]).find('li')[0]).height()){
                $($($('.page > ul')[i]).find('li')[0]).appendTo($('.page > ul')[i-1]);
            }
        }
        // if the current page is empty, delete it, and start over
        if($($('.page > ul')[i]).find('li').length == 0){
            $(e).remove();
            adjust_pages();
            return false;
        }
        // while{ there is too much element in this page, send the last element to the next page } 
        while($($('.page > ul')[i]).height() > $(e).height()){
            if($('.page')[i+1]){
                $($('.page > ul')[i]).find('li').last().prependTo($('.page > ul')[i+1]);
            }
            else{
                // need a new page, add an empty page, and start over
                $('#sidearea').append('<div class="page"><ul class="sortable ui-sortable"></ul></div>');
                make_sortable();
                adjust_pages();
                return false;
            }
        }
    });
}

#Button{
    margin-bottom:1%;
}
#firstContainer{
    height:100vh;
    overflow: hidden;
    width: 200px;
    float: left;
}
.draggableobject{
    height: 40px;
}
#sidearea{
    width: 300px;
    float: left;
    margin-left: 50px;
}
.page{
    float:left;
    background-color: white;
    height:280px;
    box-shadow: 0px 0px 2px 0px #000;
    overflow: hidden;
    width: 240px;
    margin-bottom: 20px;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li{
    background-color: grey;
    box-shadow: 0px 0px 1px 0px #000;
    cursor:pointer;
    text-align:center;
    font-size:20px;
    color:#fff;
    width: 100%;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="firstContainer">
    <ul id="draggable">
        <li class="draggableobject">5</li>
        <li class="draggableobject">6</li>
        <li class="draggableobject">7</li>
    </ul>
</div>
<div id="sidearea">
    <div class="page">
        <ul class="sortable">
            <li contentEditable="true">0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>

创建用于溢出内容的克隆页面（类似于Microsoft Word）

1 个答案: