检查 DOM 元素是否可拖动并设置等于 JavaScript 变量？答案

【问题标题】：Checking if a DOM element is draggable and setting equal to JavaScript variable?检查 DOM 元素是否可拖动并设置等于 JavaScript 变量？
【发布时间】：2011-01-21 23:36:55
【问题描述】：

通过 jQuery 创建与 DOM 元素的“可拖动”状态相等的 JavaScript 变量的最有效方法是什么？

我尝试了以下方法：

$(document).ready(function() {
    $('#editButton').click(function() {
        var isDraggable = $('.tile').draggable('option', 'disabled');
        if(isDraggable == "true")
        {
            $(function() {
                $('.tile').draggable({
                    containment: '#content',
                    scroll: false
                });
                $('.tile').resizable({
                    maxHeight: 200,
                    maxWidth: 200,
                    minHeight: 100,
                    minWidth: 100
                });
            })
        }
    })
});

我没有收到任何语法错误或任何东西，但功能不存在。

这是随附的 HTML：

<div id="content">
        <div id="navBar">
            <input type="button" id="editButton" value="Edit" />
        </div>
        <ul>
            <li>
                <div id ="google" class="tile">
                    <img src="images/tiles/google/google.png" class="tile_image" width="27" height="41" />
                    <p>Google</p>
                </div>
            </li>
            <li>
                <div id="yahoo" class="tile">
                    <p>Yahoo</p>
                </div>
            </li>
            <li>
                <div id="thelockpeople" class="tile">
                    <p>The Lock People</p>
                </div>
            </li>
            <li>
                <div id="amazon" class="tile">
                    <p>Amazon</p>
                </div>
            </li>
            <li>
                <div id="masterlock" class="tile">
                    <p>Masterlock</p>
                </div>
            </li>
            <li>
                <div id="hpionline" class="tile">
                    <p>Hpionline</p>
                </div>
            </li>
            <li>
                <div id="youtube" class="tile">
                    <p>YouTube</p>
                </div>
            </li>
            <li>
                <div id="kitco" class="tile">
                    <p>Kitco</p>
                </div>
            </li>
            <li>
                <div id="usatoday" class="tile">
                    <p>USA Today</p>
                </div>
            </li>
            <li>
                <div id="gamefly" class="tile">
                    <p>GameFly</p>
                </div>
            </li>
        </ul>
</div>

我做错了什么？

【问题讨论】：

标签： javascript jquery button

【解决方案1】：

要使其正常工作，只需替换以下行：

if(isDraggable == "true")

与：

if (isDraggable)

原因是isDraggable 是一个对象，如果它存在（即“.title” div 上的“可拖动”方法起作用）那么它将为真（存在且非零），但它会不等于1，这是true 的数值，所以你的原始测试失败了，你永远不会调用函数。

【讨论】：

谢谢尼尔！另外，如果我想检查它是否为“假”怎么办？我知道我可以使用 else，但我只是想知道。
嗨，要检查“false”，只需说“if (!isDraggable)”
再次感谢！感谢您为您的帖子添加更多解释。
P.S.我会在可拖动元素上设置 CSS 属性“{cursor: 'move'}”，以直观地指示它们是可拖动的。 $('.tile').css({cursor: 'move'}).draggable('option', 'disabled');