6

我在页面左侧有一个可滚动列表（溢出：auto），在页面右侧有几个 droppables。我找到了一种解决方法，允许在此处使用克隆将元素从列表拖到容器中，但是当元素被删除时，它会获得 position:absolute 和顶部和右侧位置以及 z-index 添加到内联样式原来在那里。附加的所有其他类都在副本中，只是拖放后，该元素不能再次拖动？

有没有办法做到这一点或删除克隆过程添加的内联样式？

显示该问题的简化代码如下所示 - 您应该能够剪切并粘贴到页面并放入您的 webroot 进行测试。提前致谢。

<!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>
4

1 回答 1

4

在您的可拖动停止方法中，我采用了克隆元素并使其可拖动。

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

当拖动元素被克隆时，它会保留“ui-draggable”类，但这还不足以使其可拖动。应该是反弹。

http://jsfiddle.net/CMYzw/

于 2011-10-16T13:18:12.477 回答