如何從一個可滾動的div拖放到可拖放，然後再次拖動？

我在頁面左側有一個可滾動列表（overflow：auto）和頁面右側的幾個可拖放列表。我發現了一種解決方法，允許使用克隆here將元素從列表拖到容器中，但是當元素被刪除時，它將獲得position：absolute，並將頂部和右側位置與z-index一起添加到內聯樣式原本就在那裏。附加的所有其他類都在副本中，只是在拖放之後，該元素不能再次被拖動？如何從一個可滾動的div拖放到可拖放，然後再次拖動？

有沒有辦法做到這一點或刪除克隆過程中添加的內聯樣式？

顯示此問題的簡化代碼如下所示 - 您應該能夠剪切並粘貼到頁面並放入您的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>

來源

2011-10-10 Trevor North

由於我還沒有能夠解決這一點，沒有人迄今已建議，我實現了一個臨時解決方案是創建上一頁和pagedn按鈕一個div並允許用戶通過列表中滾動手動。我只顯示N行，並使用MySQL中的限制功能實現我自己的分頁。這意味着DIV不需要執行overflow：auto並提供臨時解決方案。如果我找到一個人，並且沒有其他人可以提出任何建議，我會試驗併發布自己的解決方案。 TIA。 –

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

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

當拖動元素被克隆，它保留了「UI，可拖動」類，但是這還不夠，使其可拖動。它必須反彈。

http://jsfiddle.net/CMYzw/

來源

2011-10-16 13:18:12

我已經有了一個jquery函數，它使用運行onLoad的選擇器（一個附加到div的類）應用可拖動，並且我嘗試在頁面用ajax刷新時再次運行它，但它沒有奏效。我沒有想過嘗試將它放在停止功能中，所以會試一試。非常感謝。 –

如何從一個可滾動的div拖放到可拖放，然後再次拖動？

回答

相關問題