創建可拖動的div關閉jQuery的半透明拖放視覺

我有一個簡單的DIV創建可拖動的div關閉jQuery的半透明拖放視覺

<div class="draggable">some text</div>

我拖着周圍，我使用了「鬼」或「半透明克隆」視覺影響使用在列出的jQuery UI：https://jqueryui.com/draggable/#visual-feedback

我想要做的是創建一個新的可拖動的DIV在「Ghost」div被刪除後的位置。

我試圖的代碼（其示出了「鬼/半透明」）是..

$(".draggable").draggable({ 
    opacity: 0.7, helper: "clone", 
stop: function() { 
    alert($(this).offset().top); 
    } 
});

當前代碼演示：https://jsfiddle.net/y49bg4pf/

我試圖建立一個警報只是爲了測試偏移的幽靈對象，但它當然只是顯示了原始而不是幽靈的偏移。我假設一旦我可以指出這一部分，那麼我應該可以創建一個新的DIV，並將其指定爲「可拖動」類，以便再次使用新創建的DIV完成此操作。

來源

2016-08-21 eqiz

我適當地組織你的代碼（從標記分離CSS）和我已經添加了一個包裝DIV叫container。您可以通過ui.offset訪問您之後的偏移值，但是您需要將它作爲參數在stop函數上發送。

讓我知道這是否是所需的行爲。從原始拖動創建一個可拖動的新元素，但不會在拖動時繼續創建新元素。

$(function() { 
 
    $(".draggable").draggable({ 
 
    opacity: 0.7, 
 
    helper: "clone", 
 
    stop: function(e, ui) { 
 
     var newEl = $(this).clone(); 
 
     newEl.css("top", ui.offset.top); 
 
     newEl.css("left", ui.offset.left); 
 
     $('#container').append(newEl); 
 
     $(".draggable").draggable(); 
 
    } 
 
    }); 
 
});

#container{ 
 
    position: relative; 
 
} 
 
.draggable{ 
 
    height: 40px; 
 
    width: 80px; 
 
    background-color: maroon; 
 
    color: yellow; 
 
    position: absolute; 
 
    border: 1px solid black; 
 
}

<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 
<div id="container"> 
 
<div class="draggable">some text</div> 
 
</div>

來源

2016-08-21 00:41:48

真棒代碼的幫助表示感謝。看起來我接近於獲得偏移量的答案，但是我不知道要傳遞給停止函數（e，ui）的參數，我應該閱讀API，顯然，哈哈。非常感謝您向我展示從「鬼」 – eqiz

創建新div的完成部分，實際上我發現這個代碼有一個巨大的錯誤。它完成頁面的偏移量，而不是容器本身的偏移量。所以如果你在另一個DIV裏面有一個「容器」，可能是50px的填充，那麼它的下落不正確。無論如何，你可以更新你的代碼爲這個bug？ https://jsfiddle.net/y49bg4pf/1/ – eqiz

我會回覆評論，因爲這超出了原來的問題，但儘管它不是_clean_，但您可以考慮這一方法。由於您基於左上角定位元素，因此您需要分別減去#outer div的填充頂部和左側的值。 https://jsfiddle.net/y49bg4pf/4/ –

創建可拖動的div關閉jQuery的半透明拖放視覺

回答

相關問題