I am experiencing issues with my drag and drop feature not functioning properly

I am looking to reposition my #timebase1 div within the draghere div. Currently, it only moves the start of the div, but I would like to be able to drop it anywhere inside the draghere div.

function handleDrag(e) {

            var id = e.id;
            getMousePosition(id);
        }

        function getMousePosition(id) {

            var x = event.pageX,
              y = event.pageY
            $('#' + id).css({
                top: y,
                left: x + ''
            });
        }
.activelevel1 {
    background-color: #EA623E;
}
.timescalebase {
    margin-top: 13px;
    height: 7px;
    position: relative;
    width:0px;
}
  <div id="draghere" style="width:100%; margin-top:25px;">
                <div id="timebase1" draggable="true" class="timescalebase activelevel1" ondrag=handleDrag(this)>
                    
                </div>
javascriptjqueryhtmlcss

Answer №1

To enable drop functionality on your desired div, you need to add the 'allowdrop' attribute like so:

function funct(e) {

  var id = e.id;
  mouseXY(id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function mouseXY(id) {
  var x = event.pageX,
    y = event.pageY
  $('#' + id).css({
    left: x
  });
}
.activelevel1 {
  background-color: red;
  width: 10px;
  height: 10px;
}
.timescalebase {
  margin-top: 13px;
  height: 7px;
  position: relative;
}
#draghere {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draghere" style="width:100%;margin-top:25px;" ondragover="allowDrop(event)">
  <div id="timebase1" draggable="true" class="timescalebase activelevel1" ondrag="javascript:funct(this)">

  </div>
</div>

UPDATE

Here's an example using jQuery-UI:

https://jsfiddle.net/2gaq2r15/

$(document).ready(function(e) {
  $("#timebase1").draggable({
    containment: "#draghere",
    axis: "x"
  });
});

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

Exploring the boundaries of React's useContext functionality

In my applications, I specialize in creating custom hooks for accessing state stores. For example, I typically define the hook like this: const store = new Store(); const StoreContext = createContext(store); StoreContext.displayName = "StoreContext"; fun ...

javascriptreactjsreact-hooks

Navigation menu consist of two horizontal rows

I'm facing a challenge. I have a total of 8 links (one being a button) on a navigation menu that I need to display in two rows on the right side. I'm having difficulty aligning them properly while also justifying them to the right. Essentially, t ...

htmlbootstrap-4

What is the best way to define one API route that accommodates two different query combinations?

Is it possible to define 1 API route with 2 different query combination options? We have 2 routes: GET /api/v1/resource?filter=byName&key=restaurant&city=chicago GET /api/v1/resource?filter=byLocation&lat=34&long=78 In soaJS, schema ...

javascriptnode.jssoajs

The z-index of the fixed header in FullPageJS is causing the section's content to be hidden

For my current project, I am incorporating FullPageJS and using a fixed top menu that adjusts its height based on the viewport size. On smaller screens, the menu items will be stacked on top of each other, while on wider screens, the menu items will be po ...

jqueryhtmlcssfullpage.js

Can a form that has been submitted and updated without refreshing the page be accessed later using a friendly URL?

Imagine a scenario where a user submits a form, the data is processed server-side and then dynamically updated on the same page without triggering a page refresh. Can this updated information also be accessed later by using a friendly URL? Here's an ...

jqueryajax

Step-by-step guide to generating a Paypal Button using Vue 3 script setup

After going through the PayPal Developer Docs, I'm still struggling to understand how to integrate the PayPal Button into Vue.js. The code examples provided are unclear, and I can't determine if it's related to Vue 2, Vue 3, or even Angular. ...

javascriptvue.jspaypalvuejs3payment

What is the url of the file at input.files[i]?

I've encountered an issue with my JavaScript code. Currently, when a user uploads a file, the code grabs the file name. However, I need it to fetch the file's URL on the user's PC instead. How can I implement this? This is my code snippet: ...

javascript

Determine if a class is odd or even in Angular by utilizing ng-click

Trying to alternate classes on elements in an ng-repeat loop based on whether they are even or odd... <div ng-click="displayHTML(content)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name"> {{cont ...

javascriptangularjs

The jQuery script is functioning flawlessly in one specific direction

Currently, I am utilizing a basic script to alter the color of elements based on the div being hovered over. While this works smoothly in one direction down the line, when trying to reverse order and backtrack, the colors do not function as intended. The ...

javascriptjqueryhtmlcss

Combine an array of arrays with its elements reversed within the same array

I am working with an array of numbers that is structured like this: const arrayOfArrays: number[][] = [[1, 2], [1, 3]]; The desired outcome is to have [[1, 2], [2, 1], [1, 3], [3, 1]]. I found a solution using the following approach: // initialize an e ...

javascripttypescript

Is there a way to roll up the background image of the body?

body { background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 100s infinite; } .enemy-animation { position: relative; z-index: 1; animation-direction: alternate; animation-durati ...

htmlcss

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

Using an array as a route parameter triggers a "Expected to not repeat" warning

Every time I attempt to set up a router-link with an array as the parameter, the link functions properly but triggers the following warning : "Missing param for named route "start-run": Expected "files" to not repeat, but received ["aaa"] router.js .. ...

javascriptvue.jsvue-router

Steer clear of using the onRowClick event if an outputLink is clicked within a RichFaces datatable

What is the best way to prevent the call to onRowClick on a column with an output link in a datatable that targets a new window? <rich:dataTable id="dt" value="#{bean.cars} var="_car"> <a:support event="onRowCli ...

javascriptdom-eventsrichfaces

Tips for ensuring all draggable elements have been successfully dropped using jQuery's droppable feature

Currently, I am developing a website that incorporates a drag and drop functionality. In this system, there are 3 buttons that can be dragged and dropped into an array. The elements in the array are also droppable, allowing them to receive buttons from t ...

jqueryjquery-uidrag-and-dropjquery-eventsjquery-droppable

Unable to interact with web element using JavaScript

Struggling to find a solution for simulating a click on a button element on Outlook.com mobile website using JavaScript. Despite numerous attempts from online sources, the button remains unresponsive to clicks. An interesting discovery was made that the c ...

javascriptseleniumclickappium

Determine whether the regex pattern is positioned at the start of the string or following a designated character

I am working with a regex pattern and need to verify if it matches at the start of a string, after a new line, or after a white space. Additionally, I want to ensure that the pattern also matches the end of the string, after a new line, or a white space. ...

javascriptregexmatch

Confusion about the unwinding of the call stack in the Graph Depth-

Issue with function: hasPathDFSBroken Fix implemented in: hasPathDFS The updated version includes a forced parameter to address the issue, which I would prefer to avoid. I'm trying to comprehend why in the broken version, when the call stack unwinds ...

javascriptnode.jsrecursiongraphdepth-first-search

Having trouble with CSS messing up your gridview button display?

Oddly enough, whenever I place buttons inside a gridview, they end up looking very small (as shown in the image below), even though the gridview itself has no CSS applied to it. Is it possible that some other CSS is affecting the buttons? I have too much ...

asp.netcss

Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have: img.buttonImg { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: ...

cssfirefox