Question

我正在和Kend-Ui拖放工作。我必须自定义小部件以使其适用于我的原型。我意识到这不是这个小部件的正确实现，但它应该适用于我的原型设计目的。

我已经相当远了，我能够将单个物品放入我的掉落目标中。如果你查看我的js，当我将内容放到目标上时，你会看到我正在显示内容。这是我的问题发生的地方。我有2个放置目标，但我只想在放置目标中显示内容，然后重新列出列表项。

在我释放项目后，将鼠标移入和移出放置目标后，事件会持续发生吗？对象的释放是否应该停止？我无法弄清楚发生了什么事？如何在对象的发布上停止此功能？

有人能看出为什么会这样吗？我认为向drop目标添加和ID会解决这个问题，但这似乎没有帮助？

<div id="LiveArea">
     <div class="HalfPage">
          <div class="pedigreeAdded">@Html.Partial("ResultAnimal")</div>
    </div>
     <div class="HalfPage">
         <div class="pedigreeAdded">@Html.Partial("ResultAnimal")</div>
     </div>
 </div>


<ul id="sortable-basic" class="active">
<li class="sortable">NAME<span>7808123</span></li>
<li class="sortable">NAME<span>7808123</span></li>
<li class="sortable">NAME<span>7808123</span></li>
<li class="sortable">NAME<span>7808123</span></li>
<li class="sortable">NAME<span>7808123</span></li>
<li class="sortable">NAME<span>7808123</span></li>
</ul> 



<script>
    function draggableOnDragStart1(e) {
        $(".drag").addClass("hollow");
    }
    function draggableOnDragEnd1(e) {
        var draggable = $(".drag");
        $(".HalfPage").mouseenter(function () {
            $(".HalfPage").removeAttr("id");
            $(this).attr("id", "droptarget")
            if (!draggable.data("kendoDraggable").dropped) {
                $('#droptarget > div').show();
                console.log("STOP!STOP!STOP!STOP!?") /// this is where I need event to stop
            }
            draggable.removeClass("hollow");
        });
    }
    $(document).ready(function () {
        $(".sortable").mousedown(function () {
            $(".sortable").removeClass("drag");
            $(this).addClass("drag").kendoDraggable({
                hint: function () {
                    return $(".drag").clone();
                },
                dragend: draggableOnDragEnd1
            });
        });
    });
    </script>

Answer 1

这是由于这个

$(".HalfPage").mouseenter()

在拖动结束功能中，您可以注册鼠标事件。你从未注销过它。

<小时/> 我建议不要使用JQuery事件，只使用kendo拖放功能来处理这个问题。为此，您需要声明放置目标。

还记得你应该在页面开始时定义kendo拖放功能。

在下面的示例中，我使用放置目标功能添加css类'.highlight-droparea'以显示当前选择的放置目标。

dragend on drag-gable项目仅用于清理我正在使用的DOM和CSS。

$(document).ready(function(){
  registerDragAndDrop();
});

//sets up charts for the Drag and Drop feature
function registerDragAndDrop() {
    //register all target divs
    $(".HalfPage").kendoDropTarget({
        dragenter: function (e) { e.dropTarget.addClass("highlight-droparea"); },
        dragleave: function (e) { e.dropTarget.removeClass("highlight-droparea"); },
        drop: function (e) { moveItem(e.draggable.element.attr('id'), e.dropTarget.attr('id')); }
    });

    //register each item as a draggable object
    $(".sortable").each(function () {
        $(this).kendoDraggable({
            hint: function (e) { return e.clone().attr("id", "draggable").css({ opacity: 0.5 }).removeClass("sortable"); },
            dragstart: function (e) { },
            dragend: function () { $(".highlight-droparea").removeClass("highlight-droparea"); }
        });
    });

}


function moveItem(ToMove, Target) { 
  code to move item...
  You can also hide all other drop targets and then show your current one here.
}

Kendo UI - 自定义拖放

1 个答案: