我在视图中有输入元素和可拖动元素，如果我专注于任何输入元素并单击draggable，则输入元素仍然具有焦点。
如何使可拖动元素点击按预期工作？
// Initialize Interact.js Drag & Drop
interact('.draggable').draggable({
inertia: true,
restrict: {
restriction: "#visualizer-panel",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
onmove: function (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: function(event) {
console.log(event);
}
});
interact('.dropzone').dropzone({
accept: '.draggable',
overlap: 0.01,
// add / remove dropzone feedback
ondropactivate: function (event) {
event.target.classList.add('drop-active');
},
ondropdeactivate: function (event) {
event.target.classList.remove('drop-active');
},
// add / remove dropzone feedback
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
},
ondragleave: function (event) {
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
},
// drop successful
ondrop: function (event) {
console.log(event);
}
});#visualizer-panel .leftStuff {
float: left;
}
#visualizer-panel .rightStuff {
float: right;
}
#visualizer-panel .draggable:hover {
cursor: move;
}
/* Drag & Drop */
#visualizer-panel .draggable {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#visualizer-panel .drop-active { border-color: red; }
#visualizer-panel .drag-drop.can-drop { background-color: #4e4; }
#visualizer-panel .drop-target { background-color: #29e; }<script src="http://code.interactjs.io/interact-1.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="visualizer-panel">
<div class="leftStuff panel">
<div class="panel-heading">
<h4 class="panel-title">Draggables</h4>
<input />
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item draggable">asdf</li>
<li class="list-group-item draggable">bbq</li>
</ul>
</div>
</div>
<div class="rightStuff panel">
<div class="panel-heading">
<h4 class="panel-title">Drop Areas</h4>
</div>
<div class="panel-body">
<div class="dropzone">drop stuff here</div>
<div class="dropzone">drop more stuff here</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我通过深入了解interactJs API找到了解决方案，有一个选项preventDefault可以在点击draggable时设置所需的行为。
http://interactjs.io/api/#Interactable.preventDefault
// Initialize Interact.js Drag & Drop
interact('.draggable').preventDefault('never').draggable({
inertia: true,
restrict: {
restriction: "#visualizer-panel",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
onmove: function (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: function(event) {
console.log(event);
}
});
interact('.dropzone').dropzone({
accept: '.draggable',
overlap: 0.01,
// add / remove dropzone feedback
ondropactivate: function (event) {
event.target.classList.add('drop-active');
},
ondropdeactivate: function (event) {
event.target.classList.remove('drop-active');
},
// add / remove dropzone feedback
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
},
ondragleave: function (event) {
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
},
// drop successful
ondrop: function (event) {
console.log(event);
}
});#visualizer-panel .leftStuff {
float: left;
}
#visualizer-panel .rightStuff {
float: right;
}
#visualizer-panel .draggable:hover {
cursor: move;
}
/* Drag & Drop */
#visualizer-panel .draggable {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#visualizer-panel .drop-active { border-color: red; }
#visualizer-panel .drag-drop.can-drop { background-color: #4e4; }
#visualizer-panel .drop-target { background-color: #29e; }<script src="http://code.interactjs.io/interact-1.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="visualizer-panel">
<div class="leftStuff panel">
<div class="panel-heading">
<h4 class="panel-title">Draggables</h4>
<input />
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item draggable">asdf</li>
<li class="list-group-item draggable">bbq</li>
</ul>
</div>
</div>
<div class="rightStuff panel">
<div class="panel-heading">
<h4 class="panel-title">Drop Areas</h4>
</div>
<div class="panel-body">
<div class="dropzone">drop stuff here</div>
<div class="dropzone">drop more stuff here</div>
</div>
</div>
</div>