Member Avatar for nadiam

hello. i want to use the draggable plugin. i have downloaded the custom bundle : jquery downloads

im trying:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Constrain movement</title>
    <script type="text/javascript" src='js/jquery-1.11.0/external/jquery/jquery.js'></script>
    <script type="text/javascript" src='js/jquery-ui-1.11.0/jquery-ui.js'></script>
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; border: 1px solid Black }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>


</body>
</html>

but it is not working. i cant drag it or anything.

please advise. tia!

and this is the file that got downloaded.

jquery-ui-1.11_.0_-_Copy_.zip (308.31 KB)
Edited by nadiam
  • 2 Contributors
  • 3 Replies
  • 249 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by nadiam
Member Avatar for Traevel

Hi,

You are referring to a jquery-1.11.0 folder in your script tag but in the zip file you provided there is only a jquery-ui-1.11.0 folder. Using your code snippet, and the zip you provided (after removing the "- copy" part from the folder name) changing

<script type="text/javascript" src='js/jquery-1.11.0/external/jquery/jquery.js'></script>

to

<script type="text/javascript" src='js/jquery-ui-1.11.0/external/jquery/jquery.js'></script>

made your example work for me.

Member Avatar for nadiam

wow. dang. must be going blind. thanks traevel. i seriously wouldn't have seen that. thanks a lot.

Member Avatar for nadiam

Hi, so i got this problem again and me staring at the screen is not gonna help coz my eyes have gone all blurry. I decided to redo this page because something went wrong halfway and I didn't know what was wrong.

and now this irritating problem is again my issue and im sure its something really small that my eyes can't catch. so please help me.

testing:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Constrain movement</title>
  <link rel="stylesheet" href="js/jquery-ui-1.11.0/jquery-ui.css">
  <script type="text/javascript" src="js/jquery-ui-1.11.0/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.11.0/jquery-ui.js"></script>
  <style>
  .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; border: 2px solid black;}
  #draggable { margin-bottom:20px; }
  #draggable { cursor: n-resize; }
  #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
  h3 { clear: left; }
  </style>
  <script>
  $(function() {

    $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
  });
  </script>
</head>
<body>

<h3>Or to within another DOM element:</h3>
<div id="containment-wrapper">
  <div id="draggable3" class="draggable ui-widget-content">
    <p>I'm contained within the box</p>
  </div>
</div>


</body>
</html>

865fcf0f81076a2e57617f7c11d1ff2b

if i use what was given in the draggable ui demo:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

of course it'll work but i want it from the folder.

Edited by nadiam
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.