用剔除js，durandal 2.0实现html5拖放照片 [英] implementing html5 drag and drop photos with knockout js , durandal 2.0

问题描述

我在淘汰赛js视图模型中有一张照片列表，我希望能够在它们之间交换(实际上，更正确的术语是将一张照片复制到另一张照片上). 这是我的简化视图模型:

I have a list of photos in a knockout js viewmodel and I want to be able to swap among them(actually the more correct term is copy one on top of another). Here is my simplified viewmodel:

define(['durandal/app', 'knockout', 'jquery'], function(app, ko, jquery) {
    var miscPhotos = ko.observableArray();
    var draggedPhoto = ko.observable();

    function handleDragStart(data, e) {
        // e.preventDefault();
        draggedPhoto(data);
        console.log('dragStart');
        return true;
    }

    function handleDragOver(e) {
        e.preventDefault();
        console.log('dragOver');

    }

    function handleDrop(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log('drop');

    }

    return {
        miscPhotos: miscPhotos,
        handleDrop: handleDrop,
        handleDragOver: handleDragOver,
        handleDragStart: handleDragStart
    }

});

还有简化的用户界面:

<div id="holder" data-bind="foreach: miscPhotos">
    <div class="pull-left well well-small"  draggable="true" 
        data-bind="event:{
                dragstart: function(data, e){ $root.handleDragStart($data, e);},
                dragover:function(data, e){ $root.handleDragOver( e);},
                drop:function(data, e){ $root.handleDrop(e, $data);}}
     ">
    <div class="thumb">
        <img class="thumb" 
            title="" style="display: block" 
            data-bind="attr: {src: 'data:image;base64,' + PhotoData()}"
        />
    </div>  
</div>

当我尝试将一张照片复制到另一张照片上时，只会触发dragstart事件，不会触发拖动和拖放.

When I try to copy one photo on top of the other, only the dragstart event fires, dragover and drop won't fire.

推荐答案

解决方案:

您需要在dragstart定义中添加return true:

You need to add return true to your dragstart definition:

dragstart:   function(data, e){ $root.handleDragStart($data, e); return true;},

---

更多信息:

---

More info:

没有触发拖放操作，因为Knockout阻止了dragstart的默认操作，没有默认操作，就不会从dragstart过渡到dragover.

dragover isn't being fired, because Knockout is preventing the default action of dragstart, and without the default action there won't be a transition from dragstart into dragover.

我认为您尝试通过在此处添加"return true"来启用默认操作:

I think you tried to enable the default action, by adding 'return true' here:

function handleDragStart(data, e) {
   // e.preventDefault();
    draggedPhoto(data);
    console.log('dragStart');
    return true;   
}

但是，由于绑定事件的方式不同，您需要做的(这是最快的解决方法)是将"return true"移到绑定中的内联函数中:

However, because of the way you have bound your events, what you need to do (and this is the quickest possible fix) is move the 'return true' into your inline function in the binding:

dragstart:   function(data, e){ $root.handleDragStart($data, e); return true;},

我认为这会为您解决.但是，如果您愿意，可以稍微简化一下代码.您不会在事件绑定中从内联函数传递任何额外的参数，因此实际上不需要内联函数.您可以按原样提供视图模型函数:

I think that will fix it for you. But, if you like, you can simplify your code a bit. You're not passing any extra parameters from your inline functions in the event binding, so you don't actually need the inline function. You can just supply your view-model functions as they are:

   dragstart: $root.handleDragStart,
   dragover:  $root.handleDragOver,
   drop:      $root.handleDrop

要使其正常工作，您需要更改处理程序函数签名以与(data，event)的Knockout约定一起使用:

In order for this to work, you need to change your handler function signature to work with the Knockout convention of (data, event):

 handleDragStart(data, e)
 ...
 handleDragOver(data, e)
 ...
 handleDrop(data, e)

我做了一个小提琴来测试这个……我不得不稍微重写一下您的视图模型，我跳过了depend语句，只是因为不使用它来进行小提琴会更容易一些.但是代码基本上与您的代码相同，因此希望您能够阅读它.我还向视图模型添加了一些测试数据URL，因此有一个有效的演示.

I made a fiddle to test this... I had to rewrite your view-model a bit, I skipped the depend statement just because it is a bit easier to do a fiddle without it. But the code is basically the same as yours, so hopefully you'll be able to read it OK. I also added some test data URLs to the view-model so there's a working demo.

http://jsfiddle.net/NLvm7/

当我在那儿时，我还继续展示了如何在handleDrop函数中将被拖动的照片中的数据写入拖放的照片中，从而实现将一张照片复制到另一张照片的目标:

While I was there, I've also gone on to show how in the handleDrop function you could write the data from the photo being dragged into the photo you dropped it on, and so achieve your goal of copying one photo onto another:

    // The next 3 lines shows how you can copy the dragged photo onto the dropped target...
    var context = ko.contextFor(e.target);
    var index = context.$index();
    this.miscPhotos()[index].PhotoData(this.draggedPhoto().PhotoData());

这篇关于用剔除js，durandal 2.0实现html5拖放照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！