Ticket #4239: jquery-draggable-bug-workaround.html

File jquery-draggable-bug-workaround.html, 1.3 KB (added by bobbykjack, 11 years ago)

Test case for disabling draggable functionality after drop

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4
5<head>
6        <base href="http://dev.jqueryui.com/export/2134/trunk/">
7
8        <title>jQuery: disable draggable after drop</title>
9
10        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
11
12        <style type="text/css">
13        body { margin: 6em; }
14        li { border: 1px solid; padding: 0.5em; margin: 0.25em; list-style: square; }
15        </style>
16
17        <script type="text/javascript" src="jquery-1.3.2.js"></script>
18        <script type="text/javascript" src="ui/ui.core.js"></script>
19        <script type="text/javascript" src="ui/ui.draggable.js"></script>
20        <script type="text/javascript" src="ui/ui.droppable.js"></script>
21        <script type="text/javascript" src="ui/ui.sortable.js"></script>
22
23
24        <script type="text/javascript">
25        $(document).ready(function() {
26                $('#draggable li').draggable({
27                        helper: 'clone',
28                });
29
30                $("#droppable li").droppable({
31                        drop: function(event, ui) {
32                                $(this).html($(event.originalTarget).html());
33                                $(ui.draggable).draggable('disable');
34                        }
35                });
36        });
37        </script>
38</head>
39
40<body>
41
42<h2>Draggable</h2>
43
44<ul id="draggable">
45        <li>one</li>
46        <li>two</li>
47        <li>three</li>
48</ul>
49
50<h2>Droppable</h2>
51
52<ul id="droppable">
53        <li>apple</li>
54        <li>banana</li>
55        <li>cherry</li>
56</ul>
57
58</body>