javascript - 为溢出内容创建一个克隆页面(类似于 Microsoft Word)

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>