Ticket #3666: draggable_sortable.test.html

File draggable_sortable.test.html, 1.5 KB (added by Marc Diethelm, January 31, 2009 02:54AM UTC)

Testcase

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Drag into Sortable Testcase</title>

	<link rel="stylesheet" href="http://view.jquery.com/tags/ui/testing/themes/base/ui.core.css" type="text/css" />
	<link rel="stylesheet" href="http://view.jquery.com/tags/ui/testing/themes/base/ui.all.css" type="text/css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.1.js"></script>
    <script type="text/javascript" src="http://view.jquery.com/tags/ui/testing/ui/jquery.ui.all.js"></script>

    <style type="text/css" media="screen">
        #sort { width:100px; height:100px; border:1px solid #ccc; }
        div div { margin: 2px;  border:1px solid #ccc; }
    </style>

</head>
<body>

    Draggable ( connectToSortable:['#sort'] )...
    <div class="drag1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

    draggable ( connectToSortable:'#sort' )...
    <div class="drag2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

    sortable
    <div id="sort">
    </div>

    <script type="text/javascript">
        jQuery('.drag1 > div').draggable({helper:'clone',connectToSortable:['#sort']});
        jQuery('.drag2 > div').draggable({helper:'clone',connectToSortable:'#sort'});
        jQuery('#sort').sortable();
    </script>
</body>
</html>

Download in other formats:

Original Format