Home/ Questions/Q 6694041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:03:22+00:00

I have a scrollable list on the left of the page (overflow:auto) and several

  • 0

I have a scrollable list on the left of the page (overflow:auto) and several droppables on the right of the page. I found a workaround to allow an element to be dragged from the list to a container using a clone here but when the element is dropped, it gets position:absolute and a top and right position added to an inline style along with the z-index which was originally there. All other classes attached are in the copy, just that after the drag and drop, that element cannot be dragged again ?

Is there a way to do this or to remove the inline style added by the cloning process ?

Simplified code showing the issue is shown below – you should be able to just cut and paste to a page and drop in your webroot to test it. Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">   </script>

<script>
  $(document).ready(function() {
  var dropped = false;
  $(".container").droppable({
     drop: function(event, ui) {
            dropped = true;
            $.ui.ddmanager.current.cancelHelperRemoval = true;
            ui.helper.appendTo(this);
    }
 });
 $(".item").draggable({
     revert: 'invalid',
     helper: function(){
        $copy = $(this).clone();
        return $copy;
     },
      start: function(event, ui) {
                    dropped = false;
                    $(this).addClass("hide");
                },
                stop: function(event, ui) {
                    if (dropped==true) {
                        $(this).remove();
                    } else {
                        $(this).removeClass("hide");
                    }
                }
        });
    });
    </script>

    <style>
    .scrollable {
       margin-top:5px;
       float:left;
   height:140px;
   width:60px;
   overflow:auto;
}

.container {
  height: 140px;
  width: 160px;
  float:left;
  border:3px solid black;
  margin:5px;
}

.item {
  float:left;
  height:40px;
  width:40px;
 }

.red {background-color: red; }
.black {background-color: black;color: white;}
.green {background-color: green;}
.blue {background-color: blue; color: white;}
.yellow {background-color: yellow;}

</style>
</head>

<body>
  <div id="list" class="scrollable">
    <div id="p1" class="item red">A</div>
    <div id="p2" class="item black">B</div>
    <div id="p3" class="item green">C</div>
    <div id="p4" class="item blue">D</div>
    <div id="p5" class="item yellow">E</div>
  </div>
  <div>
    <div id="c1" class="container"></div>
    <div id="c2" class="container"></div>
    <div id="c3" class="container"></div>
  </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In your draggable stop method, I took the cloned element and made it draggable.

        stop: function(event, ui) {
        if (dropped==true) {
            $(this).remove();
        } else {
            $(this).removeClass("hide");
        }
        $('#'+$(this).attr('id')).draggable({revert: 'invalid'});
    }

    When the dragging element is cloned, it preserves the “ui-draggable” class, but that’s not enough to make it draggable. It must be rebound.

    http://jsfiddle.net/CMYzw/

    • 0