Issues persist with Jquery draggable not functioning properly, part 2

Trying to implement draggable functionality with jQuery on an element, but encountering issues. Here is the code snippet:

<html>
   <head>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     <style>
        #console {
            background-color: #000000;
        }
     </style>
    </head>
    <body>
       <div id="console">

       </div>
      <script>
          $(function() {
              $( "#draggable" ).draggable();
         });
      </script>
  </body>
</html>
javascriptjqueryhtmlcssjquery-ui

Answer №1

Make sure you have an element to drag. If you are looking for an element with the id draggable to enable dragging, it seems like you may want to drag a div with the id console. In that case, you can initialize the draggable functionality on the element using $( "#console" ).draggable();. Check out the working snippet below:

$(function() {
  $("#console").draggable();
});
#console {
  background-color: #000000;
  width: 300px;
  height: 300px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="console">
</div>

Answer №2

The code is set up to make #draggable draggable, but this id doesn't exist.

Check out the updated code below with a working example:

HTML

<div id="container" class="draggable">

</div>

CSS

#container {
  background-color: #000000;
  width:100px;
  height:100px;
}

JS

$(function() {
  $(".draggable").draggable();
});

I've used the draggable class in the JS because you were already using #console for the div - feel free to adjust as needed.

Example : https://jsfiddle.net/fn12kq4o/1/

Answer №3

There are a couple of things to consider:

  1. No id is defined as draggable in your HTML code.
  2. The #content is empty, which means the background will not show up in black.

Try adding some content and setting a height for your console, such as 100px. This should make the draggable effect visible.

<div id="draggable">
 <div id="console" style="height: 100px;">

 </div>
</div>

Answer №4

the element you set to be draggable is "#draggable," but there is no such element in the html. I have updated it to #console instead.

<html>
<head>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#console {
background-color: #000000;
}
</style>
</head>
<body>
<div id="console" style="width:20%;height:50px;">

</div>
      <script>
  $(function() {
    $( "#console" ).draggable();
  });
  </script>
</body>
</html>

Answer №5

There seems to be a missing element needed for the Draggable function in your code.

Here is an example code snippet that you can try:

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

</head>
<body>
<div id="draggable"></div>
</body>
</html>

CSS:

#draggable {
background-color: #000000;
height: 300px;
width: 300px;
}

JS:

$(function() {
              $( "#draggable" ).draggable();
         });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Panning is not compatible with shared camera OrbitControls

I am attempting to set up two renderers on separate div containers. Each renderer should have its own OrbitControls to update the camera associated with it. However, the camera is shared between the two renderers. The objective is to synchronize the camer ...

javascriptthree.js

Filtering content in real-time using jQuery

Currently, I am working on a live filter functionality using jQuery. The idea is to allow users to select elements based on their names, location, or activity. While my script works fine in separate modes, I would like to combine all the filters into one ...

javascriptjqueryfilteringlivesearch

Pattern for reactive forms in Internet Explorer 11

I'm currently working with this form setup: this.form = this.formbuilder.group({ weight: [weight, [Validators.pattern('^(0|[1-9][0-9]*)$')]], height: [height, [Validators.pattern('^(0|[1-9][0-9]*)$')]] }); Conta ...

javascriptangularformsinternet-explorer

The functionality to dynamically adjust the number of items displayed per slide on the Carousel component in ngx-bootstrap is currently not available

I am attempting to dynamically change the number of items displayed on a carousel during runtime. The purpose of this is to optimize viewing for users on small devices such as smartphones. My intention is to have only 2 items per slide when viewed on a s ...

javascriptangularngx-bootstrap

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

htmlcssbootstrap-4

Navigating a series of identical patterns in Django?

Users are required to submit a list of field values via a form. class FieldForm(forms.Form): field_name = forms.CharField() field_value = forms.CharField() The challenge is how can users submit multiple entries with one form submission? Also, o ...

pythonhtmldjangohttpforms

Angular JS: Problem with custom directive (directive malfunctioning due to data delay from API)

Here is a unique custom directive created to format numeric values into currency by adding proper punctuations and rounding decimal values. var customDirectiveApp = angular.module('myApp.roundedValue', []); customDirectiveApp.directive('r ...

javascriptangularjsangularjs-directive

Ways to avoid browser refresh when uploading files in React applications

I'm working with a simple file upload form in React using hooks. import React, { useState } from 'react'; import { FlexContainer } from '@styles/FlexContainer'; const TestUpload = () => { const [file, setFile] = useState<F ...

javascriptreactjswebpack

What steps can be taken to address the error "console is undefined" in PowerShell?

I have a basic .js file saved on one of my drives that contains the following code: var x=3; function numSqaure(x) { return(x*x); } var sentence="The square of" + x + "is" + numSqaure(x); console.log(sentence); When attempting to run this script thro ...

javascriptpowershell

What is the process of implementing FFT in node.js?

Struggling with implementing FFT in node.js is proving to be quite challenging for me at the moment. Despite experimenting with three different libraries, I find them all poorly documented, which only adds to the complexity of the task. My current setup i ...

javascriptnode.jsfft

Ways to center Bootstrap panel in the middle of a webpage

Is there a way to center this entire panel on the web page? I could use some guidance with this. Does anyone have recommendations for a good book to learn Bootstrap design? <div class="panel panel-default" style="max-width:500px;margin-left:auto;margi ...

htmlcssasp.net-mvctwitter-bootstrap

How can I trigger a URL anchor without automatically scrolling to it?

I need to implement a functionality on my webpage where two tabs can be switched using Javascript, while also updating the URL with an anchor (e.g. page.html#tab1) for bookmarking purposes. The default setup has the tab contents in separate divs stacked v ...

javascriptscrollanchor

Is there a way to manipulate the placement of an image within a div using CSS?

Teaching myself HTML has been quite the journey. Right now, I'm in the process of building a website purely for its aesthetic appeal, and I seem to be hitting a roadblock with the CSS/div element. As of now, it appears like this. When the h1 is remove ...

htmlcsspositioningdivider

Automatic closure of Info Window on Google Maps is not functioning as expected

I have recently developed a map which you can view here. The issue I am facing is that when I click on the layers to see the InfoWindow, they do not automatically close when I click on another layer. The JavaScript code I am using is causing this problem. ...

javascripthtmlgoogle-maps

Leveraging JavaScript Jquery AJAX for executing a curl command with the -d and -u options

Currently, I am working on integrating a basic HTML page with jQuery and Streak CRM through a simple form. For more information about Streak integration, you can refer to the Streak docs here. The specific command I am attempting to utilize is as follows ...

jqueryhtmlajaxcurl

CSS "border-clip" splitting the border in half

I found a great CSS tutorial on how to style borders with images. The tutorial can be found here. The example result of following the tutorial looks like this: https://i.sstatic.net/pgJhM.png One interesting thing I learned from the tutorial is using back ...

htmlcss

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

I am new to web design and have a unique approach; I believe in the importance of flexibility. It puzzles me why pixels (px) are commonly used instead of percentages, maybe my perspective is misunderstood. I've been on the hunt for a basic HTML layo ...

cssdomlayouthtml

Steps for assigning values to a JavaScript array using its indices

Question: Dynamically creating keys in javascript associative array Typically, we initialize an array like this: var ar = ['Hello', 'World']; To access its values, we use: alert(ar[0]); // Hello However, I am looking to assign ...

javascriptarraysinitialization

Leveraging jQuery for invoking PHP functions

Seeking guidance on running mysql queries through JQuery. Any recommendations or tutorials available? I am working on integrating a system with jquery mobile, using a mysql database as the backend. Are there any resources out there to help me understand h ...

javascriptphpmysqlajaxjquery-mobile

Conceal excess of video background overflow

My goal is to prevent the video from overflowing the container by maintaining its aspect ratio and hiding the excess portion that does not fit within the container. I have attempted using overflow: hidden; on the container, but it doesn't seem to work ...

htmlcss