6

ページの左側にスクロール可能なリスト (overflow:auto) があり、ページの右側にいくつかのドロップ可能な項目があります。ここでクローンを使用して要素をリストからコンテナーにドラッグできるようにする回避策を見つけましたが、要素がドロップされると、position:absolute が取得され、z-index とともにインライン スタイルに上と右の位置が追加されます。もともとそこにあったもの。アタッチされている他のすべてのクラスはコピー内にありますが、ドラッグ アンド ドロップの後、その要素を再びドラッグすることはできませんか?

これを行う方法、または複製プロセスによって追加されたインライン スタイルを削除する方法はありますか?

問題を示す単純化されたコードを以下に示します。ページにカット アンド ペーストし、ウェブルートにドロップしてテストするだけでよいはずです。前もって感謝します。

<!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 に答える