如何使用HTML5拖放与KnockoutJS结合使用? [英] How to use HTML5 drag and drop in combination with KnockoutJS?
问题描述
我似乎无法绑定到html5拖放事件。
I can't seem to bind to html5 drag and drop events.
这是一个模板的例子:
<script id="tabsTemplate" type="text/html">
<div class="dropzone" for="tab"
data-bind="event:{dragover: function(event){event.preventDefault();},
dragenter: function(event){event.target.addClass('dragover'); event.preventDefault();},
dragleave: function(event){event.target.removeClass('dragover'); event.preventDefault();}}
drop: function(event){console.log('blahblah!')}"></div>
<h1 class="tab" draggable="true"
data-bind="attr: {selected: $data.name === $item.selected()},
click: function(){$item.selected($data.name)},
event:{ dragstart: function(event){console.log('blah!!')},
dragend: function(event){document.getElementsByClassName('dragover')[0].removeClass('dragover')}}">
${name}
<img src="icons/close-black.png" class="close button" role="button"
data-bind="click: function(e){$item.close($data)}">
</h1>
</script>
我应该按预期工作,只要我使其成为正常的内联那些。但是,其他绑定不起作用!
What I have should work as expected... and it does as long as I make them normal inline ones. However, then the other bindings don't work!
我收到此错误消息:
未捕获的SyntaxError:意外的令牌'||'jquery-tmpl.js:10
Uncaught SyntaxError: Unexpected token '||' jquery-tmpl.js:10
这里发生了什么?有没有什么我在做错?
What's going on here? Is there something I'm doing wrong?
推荐答案
好的,我已经做了。似乎我错过了文档,它说在敲除,默认情况下,它使所有事件阻止默认/返回false。所以我要做的只是让我的dragstart处理程序返回true,现在它可以工作。 Phew !!
OK, I have worked it out. It seems I missed in the documentation where it said that in knockout, by default it makes all events prevent default / return false. So all I had to do was make my dragstart handler return true, and now it works. Phew!!
这篇关于如何使用HTML5拖放与KnockoutJS结合使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!