Tutorial on integrating jquery ui's '.droppable' feature with the jQuery '.on' method

I have a main div with three inner divs labeled 1, 2, and 3 as shown below:

<div id="main">
    <div style="height:30px; background-color:yellow;" class="bnr">Banner</div>
    <div style="height:30px; background-color:yellow;" class="bnr">Banner2</div>
    <div style="height:30px; background-color:yellow;" class="bnr">Banner3</div>
</div>

My goal is to add a dragged 

<div class="other"></div>
after any div with the class 'bnr' when dropped on a 'placeholder'. This means that when hovering over any of these three divs, it should show a 'placeholder' in between them. For instance, if I hover over <div> 1, a placeholder <div> appears between <div> 1 and <div> 2.

The layout for the placeholder is:

<div style="height:30px; background-color:light-yellow;" class="placeholder"></div>

After attempting some solutions, I realized that I need to utilize the '.droppable' function's properties 'over', 'out', and 'drop' instead of using jQuery's .mouseenter and .mouseleave functions.

$(".other").draggable({
   helper: 'clone'
});

$('.placeholder').droppable({
            over: function (event, ui) {

            },
            out: function (event, ui) {

            },
            drop: function (event, ui) {

            }
        });

How can I successfully drop onto the 'placeholder' div?

Since the placeholder is created dynamically after mouseover, the '.on' function needs to be utilized. Can you guide me on how to incorporate '.droppable' with '.on' or suggest an alternative solution?

javascriptjqueryhtmlcssjquery-ui

Answer №1

Check out this example code snippet:

$(".other").draggable({
   helper: 'clone'
 });

$('.bnr').droppable({
        over: function (event, ui) {
          $('.placeholder').remove();
          $('<div style="height:30px; background-color:light-yellow;"    class="placeholder"></div>').insertAfter(this);

        },
        out: function (event, ui) {

        },
        drop: function (event, ui) {
              $('.placeholder').remove();
              $(".other").insertAfter(this);  
        }
});

View the live demonstration here: http://jsbin.com/hoyonugupu/edit?html,js,output

Answer №2

It seems like you are in search of a draggable element linked to the sortable widget with a custom placeholder using the connectToSortable option:

$('#main').sortable({
  placeholder: 'placeholder'
});
$('.draggable').draggable({
  helper: 'clone',
  connectToSortable: '#main'
});
#main {
  margin-bottom: 50px;
}
#main div.bnr {
  height: 30px;
  background-color: yellow;
}
.placeholder {
  visibility: visible;
  height: 30px;
  background-color: orange;
}
.draggable {
  width:100%;
  height: 30px;
  background: dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main">
  <div class="bnr">Banner</div>
  <div class="bnr">Banner2</div>
  <div class="bnr">Banner3</div>
</div>
<div class="draggable">Drag Me</div>

There is no need to manually add elements, as jQuery UI provides built-in options for these interactions.

Additional point: Please refrain from using inline styles.

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

Dynamically add a plugin to jQuery during execution

After installing jQuery and a jQuery-Plugin via npm, I am facing the challenge of using it within an ES6 module. The issue arises from the fact that the plugin documentation only provides instructions for a global installation through the script tag, which ...

javascriptjquerynpmbootstrap-select

Searching for a single cell within an HTML table

I've been on the hunt for a code that can search through a table and show just one cell. I tried creating my own, but finally stumbled upon one that seems to work perfectly, except for one hiccup. When the search bar is cleared, it displays the first ...

javascripthtmlsearchhtml-table

How can we reduce the size of a JSON object in Typescript before sending it to the client?

Currently, I am faced with a common challenge. I have a database object that is a standard JS object originating from a document database, and my goal is to transmit this object to the client. However, certain fields contain sensitive information that shou ...

javascriptjsontypescriptdry

Establishing Connections to Multiple MySQL Databases Using Node.js

I'm struggling to incorporate a dropdown menu that displays all the databases from a set host. The idea is to allow users to choose a database from the drop-down and generate a report. However, I can't figure out how to connect to the host and po ...

javascriptjquerymysqlnode.jsexpress

When viewing super-sized (local) files in Chrome(ium), HTML5 video doesn't display images

I am currently developing an Electronjs application that requires playing very large videos stored on the user's machine. I have experimented with using both the vanilla HTML5 video tag and other players. Interestingly, small videos load and play with ...

htmlvideoelectronchromiummp4

Customizing Material-UI styles using makeStyles

Currently, I am in the process of building a small portfolio website. Despite my attempts to style an avatar using the makeStyles class, it seems that the Mui avatar root is overriding my desired styling. I am wondering if there is a way to achieve this w ...

cssreactjsmaterial-ui

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Trying to extract values from a table with a horizontal header when checkboxes are selected. The goal is to retrieve the values of the selected column for all rows. Code snippet provided below. <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtml

The function $(...) does not recognize tablesorter

Currently, I am encountering issues with the tablesorter plugin as my system is unable to recognize the existing function. It is unclear whether there might be a conflict with other JavaScript files, especially since I am implementing changes within a Word ...

javascriptjquerywordpress

Preventing the page from auto-refreshing upon button click

Recently, I have encountered an issue with a button on my webpage. Every time the button is clicked, the onclick code executes and then the page refreshes. This was not a problem before, but now it seems to be automatically refreshing the page. The curren ...

jqueryhtmlbootstrap-4

Sending dynamic variables from JQuery to PHP using .post

I am encountering an issue where a JQuery variable is not being passed into PHP code within the same page. The JQuery variable seems to be triggering correctly (as I receive the confirmation alert), but PHP does not recognize it. How can I resolve this? ...

phpjqueryajax

Utilizing jQuery to trigger a method in an ASCX page

There is a method to call a page function using jquery with the code below: $.ajax({ type: "POST", url: "Default.aspx/GetDate", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { // Repla ...

asp.netjqueryweb-servicesasmxpagemethods

Experience the seamless integration of Restful APIs with AngularJS and Querystring parameters

I am currently in the process of developing a web application that includes edit functionality. Currently, I have created a page with a list of records, each containing an ID. When I click on the edit button, it triggers the following: $state.go ...

javascriptangularjsexpress

Is there a way to invoke a function in an iframe from its parent?

How can I call a function that is in an iframe from the parent document? If the function were in the parent, I could simply use parent.func(); but since it's within the iframe, how can I still call it successfully? JavaScript keeps saying it can' ...

javascripthtmliframe

Alas, an error has occurred with eslint npm. The elusive 404 Not Found reared its head once more when attempting to access the es

I'm currently in the process of organizing my JavaScript code and preparing to transition to TypeScript. I recently set up node.js, npm, and eslint on my Ubuntu 20.04 system. After doing so, I executed npm -init and eslint -init. $ npx eslist util.js ...

javascriptnode.jsnpmeslint

Adjusting my navbar to dynamically resize with the changing window dimensions

Seeking guidance on creating a responsive navbar. Currently, I've successfully adjusted the bar's size based on monitor resolution, but the buttons remain static in size. I experimented with using %, vm, and vh, but suspect that there might be a ...

htmlcss

Angular JS - Selecting Directives on the Fly

I'm currently developing an application where users can choose from various widgets using a graphical user interface (GUI). My plan is to integrate these widgets as angular directives. THE CONTROLLER $scope.widgets = ['one', 'two' ...

javascriptangularjsangularjs-directive

Challenges faced when subscribing to global events in JavaScript

I have some questions about the JavaScript code snippet below: What does .events.slice(-1)[0][0] signify? Similarly, could you explain the purpose of nodes_params += "&ns=" + GLOBAL_EVENT + "," + start_from + ",-,-";? Could you elaborate on what is m ...

javascriptjquery

When deploying, an error is occurring where variables and objects are becoming undefined

I've hit a roadblock while deploying my project on Vercel due to an issue with prerendering. It seems like prerendering is causing my variables/objects to be undefined, which I will later receive from users. Attached below is the screenshot of the bui ...

javascriptreactjstypescriptnext.jsvercel

Disappearing act: The vanishing act of the Bootstrap 4 Smart Scroll Mobile

Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...

javascripthtmljquerycsstwitter-bootstrap

Utilizing DataTables to dynamically populate a table with data fetched from an AJAX request

I'm currently in the process of developing a program that showcases various topics within a specific subject. My main query revolves around whether or not the DataTable functionality will be compatible with this particular setup. The following is th ...

htmljqueryajaxdatatablesweb-deployment-project