Move the div by dragging it into another div

Check out my project code and demo here: http://jsbin.com/erofot/1

What is my objective?

I aim to allow users to move .draggabledivs only within the table (.dropable div) and to enable them to move divs horizontally between the table(days).

<script>
  $(function() {
    $( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
        helper: "clone"});
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
jquerycssdrag-and-dropjquery-ui-draggable

Answer №1

If you're searching for the 'revert' option when dealing with draggable elements, along with the 'accept' option for droppable functionality, here's a sample code snippet:

$(function() {
$( ".draggable" ).resizable();
$( ".draggable" ).draggable({revert: 'invalid', snap: "#dropable"});
$( "#drop_here td" ).droppable({
  accept: '.draggable.accept_me',
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
  });
});

I've made updates to your JSBin.

To demonstrate how it works, I've included an extra accept_me class to the first three draggable elements. When these are dragged onto a table row, they will be accepted and snapped into place. Any other draggable items not part of the top three will revert back to their original position.

Please let me know if you require further explanation on this topic.

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

I am having an issue where my div element is not inheriting the width of its

I am encountering an issue where I have one div and I check the width of that div in jQuery. I then try to set the same width on the next div, but the width does not appear. Can someone please assist me with this? Here is my code: $(document).ready(funct ...

javascriptjquery

Centered Alignment for Bootstrap Carousel Captions

I'm attempting to make a simple change here. Rather than having the Bootstrap Carousel Captions automatically align at the bottom of the Carousel, I would like them to align at the top by default. Any suggestions on how I can achieve this? ...

cssbootstrap-4

The functionality of the combobox in Vuetify differs from that of an input field

I have implemented Vuetify and am using its combobox component for search functionality on my website. However, I have noticed that the text value in the combobox only gets added to the watcher when the mouse exits the field. This behavior is not ideal f ...

javascripthtmlcssvue.jsvuetify.js

Are you looking to connect with Yahoo Weather, Yahoo GeoPlant, Google Weather, or any other API using JavaScript?

I am looking for a solution to retrieve the current weather data for a specific city using JavaScript. Can anyone recommend an API that would be best for this task? Alternatively, are there any applications that allow you to make an AJAX request to obtain ...

javascriptjqueryajaxapiweather

What are the best strategies to perfectly insert an image within a div, ensuring that no background color is visible?

Is there a way to fix the issue of a white background appearing at the bottom of this div? .flexbox-item_one { display: inline-block; width: 200px; margin: 10px; background-color: white; box-shadow: 5px 5px 5px; overflow: hidden; } .flexb ...

htmlcss

Action buttons on material cards extend beyond the boundaries of the card content on both the left and right sides

Check out this Angular 10.2 Material sample where the action buttons on the right and left extend beyond the card-content: https://i.sstatic.net/Btxy1.png The "Create account" button's right edge should align with the right edge of the fields, and t ...

cssangularangular-materialangular-flex-layout

Top method for utilizing overlays

Is there a method to randomly select hex codes for specific colors? I want to replicate the design in this image through coding. Image Here is the code I have so far: HTML <div id="group"> <div class="sub red panel"> </div><!--su ...

javascriptjqueryhtmlcss

What is the best way to create vertical space between columns in a row using Bootstrap?

Is it possible to vertically space the two pictures on the right side? I've tried adjusting the HTML structure but haven't found a solution yet. Can you help me with this? Here is a screenshot <!DOCTYPE html> <html> <head> ...

htmlcssbootstrap-4

Updating posts using AJAX, PHP, and Javascript

I have set up a forum where users can edit their posts. However, I am struggling with the code implementation. Here is what I have tried so far: PHP Code to Display Posts while($row = $result->fetch_assoc()) { echo "<div class='postclass&apos ...

javascriptphpjquery

Transfer the imageURI to a different HTML page

My mobile app, created using PhoneGap, allows users to select an image from their album. I want to pass that selected image and display it on another HTML page. Does anyone have any suggestions on how to achieve this? Below is the code snippet: selectImag ...

javascriptjquerycordovahttp-redirect

Retrieve the past week's data based on names using JavaScript

Is there a way to dynamically fetch the past seven day names, starting from today, in JavaScript? I am looking to format the result as follows: (Wednesday, Tuesday, Monday, Sunday, Saturday, Friday, Thursday, Wednesday). ...

javascriptjquerydatenamesdays

Press the vertical navigation bar

My website is currently undergoing a major overhaul. I am looking to enhance its functionality, but I may have taken on more than I can handle. You can find the link related to my query here: On my top menu, there is a button located on the left side. It ...

jqueryhtmlcssnavigationonclick

The Eclipse Phonegap framework is experiencing difficulty in loading an external string file with the jquery .load function

A basic index.html file has been created to showcase a text string from the test.txt file by utilizing the .load function from the jQuery library. The goal is to insert the textual content into an HTML (div class="konten"). The provided HTML script looks ...

javascriptjqueryajaxeclipsecordova

Verify that the input value changes onBlur

Is there a way to determine if the value of an input box has changed after blur? $("#username").on('blur', function() { $("#usertext").append("new input<br>"); }) Feel free to check out this jsFiddle example: https://jsfiddle.net/xztpts ...

javascriptjqueryhtml

Apply styling to elements in the absence of JavaScript

Is there a way to hide an element in the body when JavaScript is disabled without adding online styling? I want to accomplish this using external CSS only. I prefer not to use styles like the example below: <noscript> <style> ...some ...

javascripthtmlcssnoscript

Creating Dynamic Height for Div Based on Another Element's Height Using ReactJS and CSS

I'm attempting to set a fixed height for a div in order to enable overflow scrolling. However, I am encountering issues as I am using JavaScript within a useEffect hook to accomplish this task. The problem is inconsistent as sometimes the height is se ...

javascriptcssreactjsnext.js

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

htmlcss

What is the process for incorporating an additional input in HTML as you write?

I am looking to create a form with 4 input boxes similar to the layout below: <input type="text" name="txtName" value="Text 1" id="txt" /> <input type="text" name="txtName2" value="Text 2" id="txt" /> <input type="text" name="txtName3" valu ...

javascriptjqueryhtml

Utilizing jQuery show() and hide() methods for form validation

I created a form to collect user details and attempted to validate it using the jQuery hide and show method. However, I seem to be making a mistake as the required functionality is not working correctly. What am I missing? I have searched for solutions on ...

javascriptjquery

Out of nowhere, jQuery suddenly fails to recognize that my checkbox has been selected

http://pastebin.com/r30Wfvi3 Out of the blue, all that functionality suddenly ceased. var showMyLocation = document.createElement('input'); showMyLocation.type = "checkbox"; showMyLocation.className = "checkboxForRange"; showMyLocation.id = "sh ...

javascriptjquerycheckbox