输入模式应用程序状态，直到下次使用 Jquery 单击

Enter modal application state until the next click with Jquery

本文关键字：Jquery 单击 下次 应用 程序状态 输入模式      更新时间：2023-09-26

在拖放方面取得了有限的成功，主要是因为慢速移动设备的缓慢和跳跃行为，我想实现一种模态方法，将元素从 a 移动到 b，如下所示：

  1. 用户单击项目。通过设置 css 类对项目进行视觉标记。
  2. 用户单击目标项。标记的项目会立即移动到目标项目。

或者：

  1. 用户单击目标项目以外的任何位置：标记的项目未标记，并且不会发生任何其他操作。

因此，这个想法是在 （1） 中输入模态状态，并将模态状态保留在 （2） 或 （3） 动作中。

我在实现 （1） 和 （2） 时没有问题。我现在不知道的是如何最好地实施（3）。我应该将一般的"其他任何地方"点击绑定到什么？

很久

以前我也遇到了这个问题。所以我想出了这个（黑客？）解决方案。

小提琴

基本上，它使用"代理"div来模拟"除内容以外的任何内容"。

.HTML

<div id="wrapper">
    <div id="general_everywhere"></div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
    <div class="button">Button here</div>
</div>


.CSS

#general_everywhere
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    _background: blue;
    display: block;
}
.button
{
    position: relative;
    padding: 10px;
    width: 100px;
    margin: 5px;
    background: #efefef;
}
.clicked
{
    background: red;
}


jQuery

$('.button').click(function(){
    $(this).toggleClass('clicked');
});
$('#general_everywhere').click(function(){
    $('.button').removeClass('clicked');
    alert('You clicked on everywhere! You are GOD!');
});

希望对您有所帮助。

相关文章：