如何从可滚动的 div 拖动到 droppable 然后再次拖动？

Posted

技术标签:

【中文标题】如何从可滚动的 div 拖动到 droppable 然后再次拖动？【英文标题】：how to drag from a scrollable div to a droppable and then drag again? 【发布时间】：2011-12-04 04:45:38 【问题描述】：

我在页面左侧有一个可滚动列表 (overflow:auto)，在页面右侧有几个 droppables。我找到了一种解决方法，允许使用克隆 here 将元素从列表拖到容器中，但是当元素被删除时，它会得到 position:absolute 并且顶部和右侧位置与 z 一起添加到内联样式中- 最初存在的索引。附加的所有其他类都在副本中，只是拖放后，该元素无法再次拖动？

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

显示问题的简化代码如下所示 - 您应该可以剪切并粘贴到页面并放入您的 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>

【问题讨论】：

由于我无法解决这个问题并且到目前为止没有人提出建议，我已经实施了一个临时解决方案，即创建一个带有 pageup 和 pagedn 按钮的 div 并允许用户滚动列表手动。我只显示 N 行并使用从 mysql 中选择的限制功能实现我自己的分页。这意味着 DIV 不需要实现溢出：自动并提供临时解决方案。如果我找到一个并且没有其他人可以提出任何建议，我将尝试并发布我自己的解决方案。 TIA。 【参考方案1】：

在您的可拖动停止方法中，我将克隆的元素设为可拖动。

    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/

【讨论】：

我已经有一个 jquery 函数，它使用在 onLoad 上运行的选择器（附加到 div 的类）应用可拖动对象，我尝试在使用 ajax 刷新页面后再次运行它，但它没有工作。我没想过尝试将其放入停止功能中，所以会尝试一下。非常感谢。

以上是关于如何从可滚动的 div 拖动到 droppable 然后再次拖动？的主要内容，如果未能解决你的问题，请参考以下文章

如何将变量从 jQuery draggable 传递到 droppable

如何仅使用 Draggable 和 Droppable jQuery 从克隆中删除类？

如何使用jQuery Draggable和Droppable实现拖拽功能

jQuery UI - Droppable 只接受一个可拖动的

Droppable 不适用于克隆元素

如何使用jQuery Draggable和Droppable实现拖拽功能