Bug Tracker

Ticket #6578: bug-live-drop-ie.html

File bug-live-drop-ie.html, 3.3 KB (added by matias, 10 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4        <title>live() dragend bug</title>
5        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
6        <script type="text/javascript">
7                $().ready(function() {
8                       
9                        // *************** LIVE ***************
10                        $(".drag-live")
11                                .attr("draggable", "true")
12                                .live("dragstart dragend", function(e) {
13                                        switch(e.type) {
14                                                case "dragstart":
15                                                        var dt = e.originalEvent.dataTransfer;
16                                                        dt.setData("Text", "LIVE");
17                                                        return true;
18                                                        break;
19                                                case "dragend":
20                                                        $(".log").append("LIVE: drag end!<br/>");
21                                                        return false;
22                                                        break;
23                                        }       
24                                });
25
26                        $(".drop-live").live("dragenter dragleave dragover drop", function(e) {
27                                switch(e.type) {
28                                        case "dragenter": case "dragleave": case "dragover":
29                                                return false;
30                                                break;
31                                        case "drop":
32                                                var dt = e.originalEvent.dataTransfer;
33                                                var text = dt.getData("Text");
34                                                $(".log").append(text + ": dropped on the live() zone!<br/>");
35                                                return false;
36                                                break;
37                                }
38                        });
39                       
40                        // *************** BIND ***************
41                        $(".drag-bind")
42                                .attr("draggable", "true")
43                                .bind("dragstart", function(e) {
44                                        var dt = e.originalEvent.dataTransfer;
45                                        dt.setData("Text", "BIND");
46                                        return true;
47                                })
48                                .bind("dragend", function(e) {
49                                        $(".log").append("BIND: drag end!<br/>");
50                                        return false;
51                                });
52
53                        $(".drop-bind").bind("dragenter dragleave dragover drop", function(e) {
54                                switch(e.type) {
55                                        case "dragenter": case "dragleave": case "dragover":
56                                                return false;
57                                                break;
58                                        case "drop":
59                                                var dt = e.originalEvent.dataTransfer;
60                                                var text = dt.getData("Text");
61                                                $(".log").append(text + ": dropped on the bind() zone!<br/>");
62                                                return false;
63                                                break;
64                                }
65                        });
66
67                });
68        </script>
69        <style type="text/css">
70                [draggable=true] {
71                        -khtml-user-drag: element;
72                        -webkit-user-drag: element;
73                        -khtml-user-select: none;
74                        -webkit-user-select: none;
75                       
76                }
77
78                div {
79                        float: left;
80                        display: block;
81                        margin: 10px;
82                        padding: 10px;
83                        width: 30%;
84                }
85
86                .drop-live { background: #ccc; height: 200px; }
87                .drop-bind { background: #ccc; height: 200px; }
88                .log { clear: both; width: 100%; }
89                .drag-live:hover,
90                .drag-bind:hover {
91                        cursor: move;
92                }
93        </style>
94</head>
95<body>
96        <h1>Bugs</h1>
97        <ol>
98                <li>IE8 doesn't throw "dragend" events when using live() as the other browsers. It does work when using bind() though.</li>
99                <li>IE8 doesn't allow drops when using live() on the drop target, the other browsers do. It does work when using bind() though.</li>
100        </ol>
101        <div class="log">
102                <h2>Log</h2>
103        </div>
104        <div class="drag-live">
105                <h2>Drag using live()</h2>
106                <img src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg" alt="" />
107        </div>
108        <div class="drag-bind">
109                <h2>Drag using bind()</h2>
110                <img src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg" alt="" />
111        </div>
112        <div class="drop-live">Drop zone using live()</div>
113        <div class="drop-bind">Drop zone using bind()</div>
114       
115</body>
116</html>