•  30-06-2022
  •  | 
  •  

Question

Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>

</head>
<body>
<div id="header">Sprite Generator</div>

<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>

This is the code I use. Kindly help, am not aware what is going wrong here.

Was it helpful?

Solution

The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.

There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").

You should :

  • Either use an old version of jQuery UI plugin,

  • or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.

In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.

OTHER TIPS

The README for jQuery UI Draggable Collision reads:

Load jquery-ui-draggable-collision and its dependencies:

<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>

It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top