Transfer a hyperlink (featuring a pop-up box) to a different section on the webpage, along with a dropdown menu

Apologies in advance for my lack of expertise, ;). My ultimate goal is to create a "visual forum," although there may be a more technical term for it. I have created an image to illustrate my idea and hope to eventually share it online.

The layout includes a div with a logo, a title image div, followed by five vertical divs arranged as columns. Each column has background images and clickable pop-up links. The columns represent categories: New, In Progress, Rework, Over 30 Days, and Completed. Clicking on the titles within each column reveals ideas, comments, and discussions written in the pop-up div. From there, users can select an option from a drop-down list to move the link to a different column. For example, I can start with an idea in the New section, add a comment, then use the drop-down menu to move it to the In Progress category.

My current struggle lies in finding a way to implement the selectable list that moves the link to another column. I've scoured the internet for days searching for a solution, specifically looking for a method to "move a div to another div upon selection," but haven't found a satisfactory answer.

Once again, I apologize for my lack of experience. If this task proves too difficult or impossible, feel free to suggest alternative options via email. And if you're willing to assist and would like compensation, please provide a quote, as this project has become quite the headache. @o@.

Answer №1

If you want to add drag and drop functionality to your div elements, consider using the jQuery drag and drop plugin available at http://jqueryui.com/demos/draggable/. This tool can be very helpful in making your divs draggable on a webpage. Give it a try! :)

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

Is the asynchronous nature of setState truly reliable?

As I delve into learning React, an interesting topic that keeps popping up is the async nature of setState. It's often mentioned that if you try to console.log(state) immediately after calling setState, it will display the old value instead of the upd ...

What is the best way to retrieve all the information from a JSON file using a foreach loop in Laravel?

My Laravel Controller public function index() { $get=Storage::disk('public')>get('Philippines.json'); $json = json_decode($get, true); return view('BarangayFolder.index')>with('json& ...

What is the best way to go back in Angular 5 - using href or location.back()?

I recently encountered a dilemma with my app where users navigate to a dead-end page without any way to return. Picture clicking on a program in a TV guide and getting stuck on that program's details page, not being able to go back to the main guide. ...

Dynamic text display using Bootstrap 3

My current struggle involves the implementation of Bootstrap's collapse class in my project. I am attempting to connect buttons with text located in a separate div in order to properly collapse and display it. While I can easily achieve this in a str ...

Could it be that the lower right corner of the border has vanished?

Some items in my list have borders on the left and right sides, but I am experiencing unexpected white gaps only on the right side. I have been unable to identify the issue despite going through my code multiple times. Any assistance would be highly appre ...

Organize Dates in React Table

I need help with sorting the Date column in my code. Currently, the sorting is being done alphabetically. Here is the JSON data and code snippet: JSON [ { "date": "Jun-2022" }, { "date": "Jul-2022" } ...

modifying button depending on the state of bootstrap collapse

I'm currently utilizing Bootstrap in my project. Here is the snippet of HTML code I have: <div class="row"> <button id="dog-btn" data-toggle="collapse" data-target="#dog-section" onclick=" ...

Issue concerning invisible border

Let's take a look at my simplified CSS code: body { background: url('bg.gif') left top; } #content { background: #ddd; } .box { overflow: hidden; margin-top: 10px; background: #1e1e1e url('left-bottom-corner.gif&ap ...

Ways to eliminate the relationship between parent and child

I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover ov ...

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

Leveraging HTML attributes in CMS source code

My website is built using Prestashop, and the content pages are created using: Prestashop > Preferences > CMS > Source-Code. For each CMS page, I utilize basic HTML in the source code. THE ISSUE I am attempting to add a widget to the site&apos ...

What is the reason for the exclusion of square brackets in the reduce()

My current code: var isValid = function(s) { let arr = [...s]; arr.reduce((acc, cur) => { console.log(`arr in reduce: ${arr}`); console.log(`acc: ${acc}`); console.log(`cur: ${cur}`); if ((acc && cur) ...

GoogleMaps v3 domListener not triggering in Angularjs directive when using Phonegap

I have a directive in one of my templates and here is the code for that directive: appDirectives.directive('map', function() { return { restrict: 'E', scope: { onCreate: '&' }, link: function ($sco ...

Is it possible to navigate directly to a route using hashRouter instead of BrowserRouter after building a react app with webpack?

Issue Encountered Upon running npm run dev, the application loads successfully and I can navigate to the defined route "/", where the component is displayed. However, when using npm run buildDev and attempting to manually access "/login", it returns a "can ...

The issue I'm facing with my CSS is that the Doctype is causing some styles to

Hey there! I've been pondering the use of !DOCTYPE html lately. I recently put together a basic webpage that looked great on most browsers except for IE. After doing some digging, it was recommended to me to use !DOCTYPE html. However, this ended up ...

What is the best way to send a response containing an array of JSON objects in node.js?

Is there a way to retrieve an array of completed pivotal stories using the pivotal-node module for node.js? app.get('/delivered_stories', function(request, response) { pivotal.useToken("my_token"); pivotal.getProjects(function ( ...

I am looking to transform the col-sm-4 in Twitter Bootstrap into two equal columns, one containing an image and the other containing content, with an additional row at the bottom

Hello there! I managed to create three columns in one row, each divided into two equal sections with a footer row. Take a look at the image below for reference: You can view the alignment sample here Here is the code snippet: <div class="container"&g ...

Attempting to retrieve the mesh object using A-Frame's getObject3D('mesh') function results in an undefined value after several attempts

In an attempt to obtain a bounding box for an obj-model in A-frame, I came across two helpful links on stackoverflow that I will reference here: How to get bounding box information from a 3D object in A-frame? Any way to get a bounding box from a three.js ...

Retrieve a JSON schema containing an object directly from the database

I am looking to populate a JSON object where the properties have the same names as the attributes of another object. Sample Object: { idCliente: 4, idAplicacionEmpresa: 1, email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

Having trouble deploying my VueJS application on Heroku. Encountering the error message "npm ERR! missing script: start" in the Heroku logs and seeing "Application error" on my webpage

I recently deployed my VueJS app, "Twitter Clone," on Heroku with the expectation of having a live version available. The data was successfully synced from my GitHub repository to Heroku. However, I encountered an issue. Visiting shows an error message ...