如何防止jQuery UI可排序元素的子锚元素?

时间:2015-07-21 06:00:34

标签: javascript jquery jquery-ui href jquery-ui-sortable

有没有办法停用可排序元素的子锚<a href="..." />元素?例如,您有一个表格,其表格单元格可能包含链接。可以打开和关闭表的可排序功能,以便在关闭可排序时可以单击链接,但在打开时不能单击链接。这可能吗?

JSFiddle:http://jsfiddle.net/frqqho75/

示例:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script>
    $(function() {
      $("#sortable").sortable({ disabled: true });
    });
  </script>
</head>
<body>
  <button onclick="$('#sortable').sortable('enable');">Activate</button><button onclick="$('#sortable').sortable('disable');">Deactivate</button>
  <ul id="sortable">
    <li class="ui-state-default">Item 1 <a href="test">Link 1</a></li>
    <li class="ui-state-default">Item 2 <a href="test">Link 2</a></li>
    <li class="ui-state-default">Item 3 <a href="test">Link 3</a></li>
  </ul>
</body>
</html>

0 个答案:

没有答案