Geek Answers Handbook

How to drag from scrollable div to droppable and then drag again?

I have a scrollable list to the left of the page (overflow: auto) and a few droppables on the right side of the page. I found a workaround that allows you to move an item from the list to the container using clone here , but when the item is discarded, it gets the position: absolute and top and the right position is added to the inline style along with the z-index that was originally there. All other classes are included in the copy, only after drag and drop, this element can not be dragged again?

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

The simplified code showing the problem is shown below - you should be able to simply cut and paste to the page and drop your website to check 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>
+5
source share
1 answer

In your stopgable stop method, I took the cloned element and dragged it.

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

When a drag and drop element is cloned, it retains the "ui-draggable" class, but this is not enough to drag it. It should be a rebound.

http://jsfiddle.net/CMYzw/

+3
source

More articles:


All Articles