我使用 jQuery UI 可拖動和可調整大小的物件。
在這里你可以看到例子
正如您在頂部看到的那樣，我有 2 個輸入，用戶可以在其中添加一些寬度和高度引數，單擊 ob 按鈕添加區域后，用戶可以在視圖中看到新區域。
在懸停時我添加了洗掉按鈕，但這個按鈕沒有作為方面進行。洗掉此按鈕的第一個物件，但如果用戶添加了幾個物件，例如想要洗掉物件#3，它不會被洗掉。
我嘗試了幾種洗掉物件的方法，但它不起作用。
現在我使用這種方法來洗掉：
$(document).on("mouseover", function(event) {
console.log('#' event.target.id '')
$('#' event.target.id '').find("#delete-area").toggleClass("hide")
$('#' event.target.id '').find("#delete-area").toggleClass("gg-remove")
$("#delete-area").click(function() {
$('#' event.target.id '').parent().remove();
});
});
但這會從頁面中洗掉所有視圖。
uj5u.com熱心網友回復：
問題是您有多個具有相同 id 的元素。ID 應該始終是唯一的。
$(document).on("mouseenter",".grid-item", function(event) {
$(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("mouseleave",".grid-item", function(event) {
$(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("click",".delete-area",function() {
$(this).parent().remove();
});
我已經將 id 更改為 js 代碼中的類，現在它可以作業了。
在另一個事件中也有一個點擊事件，每次觸發另一個事件時都會繼續生成點擊事件。我已經移動了你的代碼
我還建議您使用mouseenter而不是滑鼠懸停。
演示
顯示代碼片段
var count = 0;
$(".lpms-3-button").click(function() {
count = 1;
var areaWith = $("#width-area").val();
var areaHeight = $("#height-area").val();
var areaColor = $("#text").val();
var valueStream = $("#valueStream option:selected").text();
console.log(areaWith, areaHeight, valueStream)
var objects1 = `<div data-value-stream="${valueStream}" id="boxVs${count}" style="width:${areaWith "px"};height:${areaHeight "px"}; left: 0px; top: 0px; background-color: #ccc ">
<a href="#" id="" ></a >
</div>`
$(".grid").append(objects1);
$(".grid-item").draggable({
grid: [10, 10],
snap: ".drop-target"
});
$(".drop-target").droppable({
accept: ".drag-item"
});
$('.grid-item').resizable();
$("#width-area").val("");
$("#height-area").val("");
$("#text").val("")
});
var myDraggable = $('.grid-item').draggable();
var widget = myDraggable.data('ui-draggable');
var clickEvent = null;
myDraggable.click(function(event) {
if (!clickEvent) {
widget._mouseStart(event);
clickEvent = event;
} else {
widget._mouseUp(event);
clickEvent = null;
}
});
$(document).on("mouseenter",".grid-item", function(event) {
$(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("mouseleave",".grid-item", function(event) {
$(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("click",".delete-area",function() {
$(this).parent().remove();
});.resizable {
position: absolute;
bottom: 2px;
right: 5px;
cursor: pointer;
}
.drop-target {
width: 100%;
height: 100vh;
border: dashed 1px orange;
background: whitesmoke url('https://s3.amazonaws.com/com.appgrinders.test/images/grid_20.png') repeat;
}
.area-builder {
display: contents;
}
.gg-remove {
box-sizing: border-box;
position: relative;
display: block;
float: right;
top: 5px;
right: 5px;
transform: scale(var(--ggs, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 22px
}
.gg-remove::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 10px;
height: 2px;
background: currentColor;
border-radius: 5px;
top: 8px;
left: 4px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="area-builder">
<input type="number" min="0" id="width-area" class="form-control" placeholder="Width">
<input type="number" min="0" id="height-area" class="form-control" placeholder="Height">
<select id="valueStream">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
<button type="button" class="lpms-3-button">Add area</button>
</div>
<div class="drop-target">
<div class="grid">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430895.html