Dragging the close icon of the DIV along with the DIV

Check out the JSFiddle

I'm having trouble getting the close icon within a draggable DIV to move along with the rest of the DIV. It seems like there might be an issue in this part of the code.

$self = $(this);
$(opts.parent).append($self);
$('span.' + opts.classPrefix + '_oClose').remove();
$('body').append($overlayClose);
$('div.' + opts.classPrefix + '_overlay').remove();
$('body').append($overlay);
$self.draggable();

It seems like the problem is related to how elements are appended to the HTML body. I even tried appending a blank div to the body and then adding overlay and overlayClose elements to it, but that didn't work either. Any suggestions?

javascriptjquerycss

Answer №1

According to a demonstration by Harry, the key can be found at http://jsfiddle.net/hari_shanx/8njzxhvx/3/

The magic happens on line 24 :) By appending the closure to the overlay and then enabling drag functionalities.

  $self.append($overlayClose);
  $self.draggable();

Answer №2

Perhaps your code could benefit from having a parent div set to relatively positioned, with a child that is absolutely positioned.
HTML 

<div id="test">Hello! I'm exploring ways to make the close div icon move along with the div.
<img class="close" src="https://cdn3.iconfinder.com/data/icons/status/100/close_4-512.png" alt="">
</div>

CSS 

#test {
    background: lightgrey;
    padding: 5px;
    position: relative;
    top: 100px;
}

img.close {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 15px;
    width: 15px;
    cursor: pointer;
}

To enable dragging, I utilized jQuery UI: 

$( "#test" ).draggable();

$("img.close").click( function(e){
    $("#test").fadeOut();
});

I've created a demonstration on JSFiddle for better understanding:
FIDDLE

Answer №3

Here's a suggestion for you to try out:

<div id="test">
  <a href="javascript:void(0)" class="close">Close</a>
Hello there! I'm trying to figure out how to make the close div icon move along with the div element.</div>

CSS:

.close{
 float: right;
 top: -31px;
 position: relative;
 left: 23px;
 background:url()// your close icon

}

This setup will allow your anchor tag to be draggable alongside the div, enabling you to trigger events on the anchor tag for closing purposes.

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

A guide on extracting JSON data embedded within an XML document

<?xml version="1.0" encoding="utf-8"?> <string xmlns="http://s.com/webservices/">{ "Status": "0", "UserID": "2", "SessionTimeOut": "10", "TestList": [ { "PlantCode": "01", "PlantName": "Master", "PlantAddr": "Maste ...

jqueryxmljson

The issue with the Marquee function in Firefox persists, despite my efforts to incorporate several jQuery plugins

Currently in the process of developing a website, I have incorporated various jQuery scripts for enhanced functionality, such as parallax effects: jquery.parallax.js jquery.anythingslider.fx.js jquery.anythingslider.js As the development progresses, ...

phpjavascriptjqueryhtml

Automatically refresh a pair of pages in sequence

Seeking advice on how to execute the following steps in JavaScript: - Pause for 120 seconds - Access http://192.168.1.1/internet-disconnect (in an iframe or similar) - Pause for 3 seconds - Access http://192.168.1.1/internet-connect - Repeat Here is ...

javascripthtmlajaxreload

What is the best method to disable default inline styles applied by Three.js on canvas element for webpage background?

After successfully creating a scene with three.js, I encountered an issue trying to use it as the background for my page. Unfortunately, I am unable to get the canvas element to move without cutting off half of my page. I have meticulously removed all CSS ...

javascriptcssthree.js

Using Google's Closure Compiler to Optimize JSON Files

When dealing with a json string that is parsed and properties of the object are accessed using dot notation, a warning may be triggered by the google closure compiler stating that the property is not defined. To overcome this issue, one workaround is to c ...

javascriptjsongoogle-closure-compiler

How to smoothly rotate a three-dimensional object in Three.js until it reaches a predetermined angle

Recently, I delved into the world of Three.JS, only to encounter a puzzling roadblock. My goal is to create a drivable car controlled by the Arrow Keys. Thus far, I've managed to make it move forwards and backwards, with the wheels turning appropriate ...

javascriptthree.js

Displaying form fields based on conditions in CodeIgniter using PHP

One of the elements in my form is a select input for manufacturers. <div class="form-group"> <label for="manufacturer">Manufacturer</label> <select id="manufacturerSelect" name="manufacturer" class="form-control"> ...

phphtmlcsscodeigniter

Issue with collapsed accordion toggle functionality

HTML <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data ...

htmlcssbootstrap-4

Tips for preventing the repetition of values when dynamically adding multiple values to a text box using JavaScript

I am working on a function that adds multiple unique values to a hidden field. It is currently functioning correctly, but I want to ensure that the values added to the hidden field are unique and not duplicated if entered more than once. The select box wh ...

javascripthtml

Adjust grid percentages using jQuery Mobile

Struggling with creating a grid that includes form drop-downs and text boxes. Desiring the grid to be divided into sections of 25%, 50%, 25%, but having trouble understanding the grid system syntax. <fieldset class="ui-grid-b"> <div clas ...

jqueryhtmljquery-mobile

What is the process for making local dynamoDB queries with dynamoose?

In order to avoid constantly connecting to Amazon Web Services as a developer, I decided to install DynamoDB on my local computer following the guidelines provided in the AWS Docs. My backend is built using node.js. For modeling Amazon's DynamoDB in ...

javascriptnode.jsamazon-dynamodbdynamoose

Updating the background of a div in HTML through the power of JavaScript

I am having trouble changing the background of a DIV. I believe my code is correct, but it doesn't seem to be working. I suspect the error lies with the URL parameter, as the function works without it. Here is my code: <script language="JavaS ...

javascripthtml

Adjust the size of an element by utilizing a different element

I'm facing a challenge with this code. I need to dynamically set the width of the "wrap-description" divs to be equal to the width of the corresponding "picture-damage" images plus an additional 20 pixels. Since there will be multiple elements for bot ...

cssangularjsangularjs-ng-repeatdirectiveng-style

Unloading a dynamically-loaded child component in Vue.js from the keep-alive cache

I have a question that is similar to the one mentioned here: Vue.js - Destroy a cached component from keep alive I am working on creating a Tab System using Vue router, and my code looks something like this: //My Tab component <template> <tab& ...

javascripttypescriptvue.jsvue-router

The bluebird and mongoose collaboration utilizing the power of Promises

Currently, I am facing a challenge in a function that I am working on (I might be approaching it incorrectly). To provide some context, my goal is to add bulk data to a collection named "Sites" using a CSV format of site, country, type. I am attempting to ...

javascriptnode.jsmongodbpromisebluebird

The request to http://localhost:3000/cartdata has encountered an internal server error (500) in the isAxiosError.js file at line

Error Image I'm currently working on developing a shopping cart feature, and I've encountered an issue when transferring data from the client side to the server side. Despite the cart data being successfully updated in the session, an internal se ...

javascriptnode.jsexpressaxios

Exploring the concepts of closure and scope

It seems that the function inResult always returns false and the loop is not being executed, probably due to a lack of understanding of closures. However, I can confirm that the result variable contains the correct properties. function hasId() {return ...

javascriptjqueryclosures

What are some effective ways to utilize the outcome of a FB FQL multiquery?

I'm having some confusion with Facebook's fql.multiquery feature. My goal is to fetch all the comments on a specific post and then retrieve the user information for each commenter. While I can easily get the comments, I am facing difficulty in o ...

javascriptjsonfacebookfql.multiquery

Clicking on tabs causes their content to mysteriously vanish

I am working on creating a dynamic menu using jQuery that switches content based on tabs. However, I am facing an issue where clicking on a different <li> item causes the content to disappear. Each list item should correspond to different content sec ...

jqueryhtmlcssmenutabs

Ways to store a JSON string in a variable

When utilizing the ajax function, I am able to retrieve my JSON string. Here is an example: $.ajax({ type: "POST", url: "http://localhost/./Service/GetPageInfo", dataType: "json", contentType: 'application/json' ...

javascriptjqueryjsonajax