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

发布于 2024-12-09 02:56:25 字数 2877 浏览 6 评论 0原文

我在页面左侧有一个可滚动列表（溢出：自动），在页面右侧有几个可放置的列表。我找到了一种解决方法，允许使用克隆这里但是当元素被删除时，它会得到位置：绝对，并将顶部和右侧位置与原来存在的 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落成白 2024-12-16 02:56:25

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

    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/

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 原文

~没有更多了~