我有一個簡單的 div 元素，我想將它拖到圖像上，但是當我將 div 元素拖到圖像上時，它不會在那里顯示。1.我想將元素的副本拖到圖像上我嘗試了不同的建議，但沒有得到我想要的結果。1. 我使用了 helper:'clone'--> 當我使用 Clone 時它正在制作副本，draggable但它仍然沒有在圖像標簽上顯示元素。在這里我提到了我的簡單代碼，所以請檢查一下。并建議我實現我的結果。@{ ViewBag.Title = "Draggable"; Layout = null;}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><div> <div class="ui-visual-focus draggable" style="width:100px;"> Textbox </div> <br /> <div class="droppable"> <img src="~/Documents/employeeFormImage.png" /> </div></div><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script> $(document).ready(function () { }); $(function () { $('.draggable').draggable({ revert: "invalid", stack: ".draggable", helper: 'clone' }); $('.droppable').droppable({ accept: ".draggable", drop: function (event, ui) { var droppable = $(this); var draggable = ui.draggable; // Move draggable into droppable draggable.clone().appendTo(droppable); } }); });</script>
1 回答
慕沐林林
TA貢獻2016條經驗 獲得超9個贊
如果我的問題正確，那么您可以通過 CSS 中的小技巧來實現這一點，您可以使用<img>with position:absolute 并使其適合容器，droppable <div>然后它將是這樣的，還要注意我刪除了helper.clone.
更新：可調整大小的拖動，請注意我添加了 css.ui-visual-focus <div>并強制執行絕對位置，以便它不會向下推可放置區域。
$(function () {
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable"
}).resizable();
$('.droppable').droppable({
accept: ".draggable",
});
});
img {
width: 300px;
height: auto;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.ui-visual-focus {
position:absolute !important;
width: 100px;
height: 30px;
}
.image-container {
top: 20px;
position:relative;
width:300px;
max-height: 200px;
border:1px solid;
height:200px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<div class="ui-visual-focus draggable" style="width:100px;">
Textbox
</div>
<br />
<div class="image-container droppable">
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80" />
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
添加回答
舉報
0/150
提交
取消