Question

我正在使用此方法http://api.jqueryui.com/sortable/#option-connectWith将多个项目从弹出列表拖放到main包含的另一个div中。我希望能够从列表A拖到列表B但是当项目被删除时，我需要将原始列表保留在列表A中。我检查了选项和事件，但我相信没有类似的东西。有什么方法吗？

HTML：

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<style>
.main {
    display: block;
    margin: 0 auto;
    padding: 50px 0;
    position: relative;
    text-align: center;
}   
ul {border:1px solid Black;width:200px;height:200px;display:inline-block;vertical-align:top}
li {
 background-color: Azure;
 border-bottom: 1px dotted Gray;
 cursor: move;
}   
li.selected {background-color:GoldenRod}
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
</style>
</head>

<body>
<div class="main">
    <h1>POC Test for D&D</h1>

    <ul class="ui-sortable">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>


<div id="dialog1" title="POC For D&D">
    <p>Click to select items</p>
    <ul class="ui-sortable">
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
    </ul>
</div>
<br/>
<button id="opener">Open Dialog</button>
</div>

JQUERY：

<script type="text/javascript">

$(window).load(function(){

    $("li").click(function() {
           $(this).toggleClass("selected");
    });


    $( "#dialog1" ).dialog({
            autoOpen: false,  
        });
        $( "#opener" ).click(function() {
            $( "#dialog1" ).dialog( "open" );
        });

    $("ul").sortable({

            connectWith: "ul",
            start: function(e, info) {
                info.item.siblings(".selected").appendTo(info.item);

            },
            stop: function(e, info) {
                info.item.after(info.item.find("li"));
            }
    });

});
</script>

使用jquery UI可排序时如何复制多个项目？

0 个答案: