从源码来看, 绑定在树节点的click事件, 会因为先触发内部的onmousedown, 调用dragStart方法而导致原DOM节点被移除, 继而导致click事件无法触发
这里在不修改源码的前提下提供两个方案:
1. click事件换成mousedown事件
2. 通过对源码onStartEvent方法的分析, 在树节点上放一个button将树节点的"拖拽开始"和"点击事件"分离(注意这里的button需要不同于nestable自己的折叠按钮的样式设定)
举个栗子:
<!DOCTYPE html><html lang="en">
<head>
<meta name="author" content="sleest">
<meta name="description" content="nestable example for item click, 2017/08/23">
<title>Document</title>
<meta charset="utf-8">
<style>
.dd {
position: relative
display: block
list-style: none
line-height: 1.5
}
.dd-list {
display: block
position: relative
padding: 0
list-style: none
}
.dd-list .dd-list {
padding-left: 2rem
}
.dd-collapsed .dd-list {
display: none
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block
position: relative
min-height: 20px
line-height: 1.5
}
.dd-handle {
display: block
height: 30px
margin: 5px 0
padding: 5px 10px
border: 1px solid #ccc
background: #fff
box-sizing: border-box
-moz-box-sizing: border-box
}
.dd-handle:hover {
color: #2ea8e5
}
/* 注意这里只设置nesttable自带折叠按钮的样式 */
.dd-item>button[data-action] {
display: block
position: relative
cursor: pointer
float: left
width: 25px
height: 20px
margin: 5px 0
padding: 0
text-indent: 100%
white-space: nowrap
overflow: hidden
border: 0
background: transparent
font-size: 12px
line-height: 1
}
/* 注意这里只设置nesttable自带折叠按钮的样式 */
.dd-item>button[data-action]:before {
content: '+'
display: block
position: absolute
width: 100%
text-align: center
text-indent: 0
}
.dd-item>button[data-action="collapse"]:before {
content: '-'
}
.dd-placeholder,
.dd-empty {
margin: 5px 0
padding: 0
min-height: 30px
background: #f2fbff
border: 1px dashed #b6bcbf
box-sizing: border-box
-moz-box-sizing: border-box
}
.dd-empty {
border: 1px dashed #bbb
}
.dd-dragel {
position: absolute
pointer-events: none
z-index: 9999
}
.dd-dragel>.dd-item .dd-handle {
margin-top: 0
}
.dd-dragel .dd-handle {
-webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1)
box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1)
}
</style>
</head>
<body>
<div class="dd">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
<button id="btn-demo" style="position: absolutetop: 0right: 0">A Button</button>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
</li>
<li class="dd-item" data-id="3">
<div class="dd-handle">Item 3</div>
<ol class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 4</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 5</div>
</li>
</ol>
</li>
</ol>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.js"></script>
<script src="https://cdn.bootcss.com/Nestable/2012-10-15/jquery.nestable.js"></script>
<script>
function someEvent(event){
console.log(this,event.type)
}
$('.dd').nestable()
$('body').on('mousedown', '.dd-item', someEvent)
$('body').on('click', '#btn-demo', someEvent)
</script>
</body>
</html>
结果:
