如何检查可以向哪个方向移动元素?

时间:2019-02-02 06:22:02

标签: javascript jquery

我想添加一个小功能来向上/向下/向左/向右移动元素。

如何检查元素(div跨度等)可以完全朝哪个方向移动?

例如,我有以下代码:

<div id="stop_here_container">
<div></div>
<div>
  <div><div>
  <div></div>
  <div></div>
</div>
<div></div>
</div>

现在我必须检查在哪个方向上的每一个元素可能被移动(元件可以是无限嵌套!)。例如,要知道这一点:

<div id="stop_here_container">
<div>I can move down</div>
<div>
  <div>I can move up/down/right</div>
  <div>I can move left/right/up/down</div>
  <div>I can move up/down/left</div>
</div>
<div>I can move up</div>
</div>

之后,我可以向每个元素添加一个data.attr或一个类,然后继续进行操作。

感谢您的帮助和建议

1 个答案:

答案 0 :(得分:2)

您可以使用data属性来存储您的状态,并使用class可以轻松地找到该状态,如下所示。

$(".move").mousedown(function() {
  console.log($(this).data('myval'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='move' data-myval='down'>i can move down</div>
<div>
  <div class='move' data-myval='up/down/right'> i can move up/down/right</div>
  <div class='move' data-myval='left/right/up/down'> i can move left/right/up/down</div>
  <div class='move' data-myval='up/down/left'> i can move up/down/left</div>
</div>
<div class='move' data-myval='up'>i can move up</div>