[jQuery UI] Impossible d'initialiser un draggable()
Bonjour,
lorsque je tente de rendre une div draggable, j'ai le message d'erreur suivant :
Citation:
Uncaught TypeError: Cannot set property '_cursor' of undefined
Cette erreur surgit lorsque je tente de déplacer un élément sur lequel j'ai effecuté un : ".draggable();"
Le code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>-</title>
<script charset="utf-8" src="jquery-1.4.2.min.js"></script>
<script charset="utf-8" src="jquery-ui-1.8.1.custom.min.js"></script>
<script charset="utf-8" src="building.js"></script>
<style>
#panel {
position: absolute;
width: 500px;
height: 500px;
border: 1px black solid;
}
#B1 {
position: absolute;
top: 200px;
left: 100px;
background-color:blue;
border: 1px black solid;
}
#B2 {
position: absolute;
top: 300px;
left: 150px;
background-color:green;
border: 1px black solid;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#panel > div").building({
name: "-",
len: 100,
width: 100,
zoom: "#zoom"
});
});
</script>
</head>
<body>
<label for="zoom">Select a zoom value:</label>
<select id="zoom">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div id="panel">
<div id="B1">
</div>
<div id="B2">
</div>
</div>
</body>
</html> |
La fonctionnalité JS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| // JavaScript Document
(function($) {
// Private
_self = null;
_opts = {};
_ratio = 1.0;
$.fn.building = function(options) {
// Internal reference
_self = $.fn.building;
// Options
_opts = $.extend({}, _self.defaults, options);
// Adding building classname
this.addClass(_opts.classname);
// Do it draggable
if(_opts.draggable == true) {
_self.draggable.call(this);
}
// Painter
$(_opts.zoom).change(function(event) {
event.preventDefault();
_ratio = $(_opts.zoom).val();
_self.redraw.call($("." + _opts.classname));
return false;
});
// Each div becomes a building
$.each(this, function() {
var _element = $(this);
var position = _element.position();
$.each(_opts, function(key, value) {
_element.data(key, value);
});
_element.data("top", position.top);
_element.data("left", position.left);
});
// Draw it
$(_opts.zoom).trigger("change");
return this;
};
$.fn.building.redraw = function() {
return $.each(this, function() {
var _element = $(this);
_element.css({
top: (_element.data("top") * _ratio) + "px",
left: (_element.data("left") * _ratio) + "px",
width: (_element.data("len") * _ratio) + "px",
height: (_element.data("width") * _ratio) + "px"
});
});
};
$.fn.building.draggable = function() {
// Ce code ci plante
$(this).draggable();
// Ce code ci pante aussi, alors que ça ne devrait pas ...
$("#B1").draggable();
return this;
};
$.fn.building.defaults = {
name: '',
len: -1,
width: -1,
height: 1,
classname: "building",
draggable: true
};
}) (jQuery); |
Des idées sur pourquoi j'ai cette erreur à chaque fois que je rends un élément draggable?
:merci:
