Question

154

Drag and insert div into another div

rated 0 times [ 155] [ 1] / answers: 1 / hits: 15664 / 11 Years ago, sat, august 3, 2013, 12:00:00

I am trying to design a feature that could drag and insert one div into another div.

For example:

<div id=1> </div> <div id=2> </div>

i want to make #1 draggable (I know it can be done with jQuery, so draggable is not part of my question), and drag #1 over #2, and when mouseup, #2 could be inserted into #1

<div id=1> <div id=2> </div> </div>

could somebody explain to me how to achieve that?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

andrewb

Add To Favorites

Follow

Total Points: 259

Total Questions: 124

Total Answers: 90

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

andrewb questions

1 How can i access child component method in parent component using ref in Vue3?

Sun, Jun 12, 22, 00:00, 2 Years ago

1 TypeError: Cannot destructure property 'eligibleURLPatterns' of 'Yt' as it is null

Sun, May 1, 22, 00:00, 2 Years ago

1 Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No exports main defined in package.json

Sat, Oct 16, 21, 00:00, 3 Years ago

1 Is it okay to dispatch slice's action from another action in redux-toolkit?

Wed, Apr 21, 21, 00:00, 3 Years ago

1 Cannot find module axios - compatibility issue with typescript

Tue, Feb 2, 21, 00:00, 3 Years ago

View All

answered 11 Years ago jordenfabiand · Accepted Answer

You could simplify this quite a bit by using jQuery UI's Sortable

Working Example

$(document).ready(function () {

    addElements();

    $(function () {

        $(#list1, #list2).sortable({

            connectWith: .lists,

            cursor: move

        }).disableSelection();

    });





});



function addElements() {

    $(#list1).empty().append(

        <li id='item1' class='list1Items'>Item 1</li> +

        <li id='item2' class='list1Items'>Item 2</li> +

        <li id='item3' class='list1Items'>Item 3</li>);

}