gpt4 book ai didi

javascript - 将draggable div的值与droppable input onclick事件进行比较

转载 作者:行者123 更新时间:2023-11-28 07:16:55 25 4
gpt4 key购买 nike

如何将可拖动 div 的值与单击按钮事件上的可放置输入进行比较。当可拖动 div 拖到可放置 div 上时,我需要将可拖动 div 的值与可放置 div onclick 按钮事件进行比较。

<script>
$(function() {
$(".mover").draggable();
$('.place').droppable({
drop: Drop
});
});

function Drop(event, ui) {
var draggableId = ui.draggable.attr("id");
var droppableId = $(this).attr("id");
$('.place').removeClass(draggableId);
$('#' + droppableId).addClass(draggableId);
}

function GetResult() {
if ($('#draggable').attr('data-value') == $(".draggable").attr('data-value')) {
alert("value match");
} else {
alert("value not match");
}
}
</script>
<body>
<div class="wrapper">
<div class="container-word">
<h1 class="main-title">Drag n Drop</h1>

<div class="left-word">
<h1>Words</h1>

<p>
<span id="draggable" class="ui-widget-content mover" data-value="1">Word1</span>
</p>
<p>
<span id="draggable1" class="ui-widget-content mover">Word2</span>
</p>
<p>
<span id="draggable2" class="ui-widget-content mover">Word3</span>
</p>
<p>
<span id="draggable3" class="ui-widget-content mover">Word4</span>
</p>
<p>
<span id="draggable4" class="ui-widget-content mover">Word5</span>
</p>
<p>
<span id="draggable5" class="ui-widget-content mover">Word6</span>
</p>
<p>
<span id="draggable6" class="ui-widget-content mover">Word7</span>
</p>
<p>
<span id="draggable7" class="ui-widget-content mover">Word8</span>
</p>
<p>
<span id="draggable8" class="ui-widget-content mover">Word9</span>
</p>
<p>
<span id="draggable9" class="ui-widget-content mover">Word10</span>
</p>
<p>
<span id="draggable10" class="ui-widget-content mover">Word11</span>
</p>
</div>
<div class="right-side">
<div class="row">
<h3>Category 1</h3>

<div class="inputs">
<input type="text" value="" id="droppable" class="ui-widget-header place ipt1" data-value="1">
<input type="text" value="" id="droppable1" class="ui-widget-header place">
<input type="text" value="" id="droppable2" class="ui-widget-header place">
</div>
</div>
<div class="row">
<h3>Category 2</h3>

<div class="inputs">
<input type="text" value="" id="droppable3" class="ui-widget-header place">
<input type="text" value="" id="droppable4" class="ui-widget-header place">
</div>
</div>
<div class="row">
<h3>Category 3</h3>

<div class="inputs">
<input type="text" value="" id="droppable5" class="ui-widget-header place">
<input type="text" value="" id="droppable6" class="ui-widget-header place">
<input type="text" value="" id="droppable7" class="ui-widget-header place">
</div>
</div>
<div class="row">
<h3>Category 4</h3>

<div class="inputs">
<input type="text" value="" id="droppable8" class="ui-widget-header place">
<input type="text" value="" id="droppable9" class="ui-widget-header place">
</div>
</div>
<div class="row">
<h3>Category 5</h3>

<div class="inputs">
<input type="text" value="" id="droppable10" class="ui-widget-header place">
</div>
</div>
<input type="button" value="Check" onClick="GetResult()">
</div>
</div>
</div>
</body>

最佳答案

处理 droppable 事件时可以获取 targetDiv 的 attr 吗?尝试一下

function Drop(event, ui) {
console.info($(event.target).attr("data-value"));
console.info(ui.draggable.attr("data-value"));

}

关于javascript - 将draggable div的值与droppable input onclick事件进行比较,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30747656/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com