javascript - Kendo UI - 自定义拖放

Question

我正在使用 Kend-Ui 拖放功能。我必须自定义该小部件才能使其适用于我的原型(prototype)。我意识到这并不完全是这个小部件的正确实现，但它应该适合我的原型(prototype)设计目的。

我已经走了很远了，我可以将单个项目放入我的放置目标中。 如果您查看我的 js，您可以看到当我将内容放到目标上时，我正在显示内容。这就是我的问题发生的地方。我有 2 个放置目标，但我只想显示我重新释放列表项的放置目标中的内容。

在我释放项目并将鼠标移入和移出放置目标后，事件不断触发？释放对象不应该阻止这个吗？我不明白这是怎么回事？如何在对象释放时停止此函数？

谁能明白为什么会发生这种情况吗？我认为向放置目标添加 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()

在 Drag end 函数中，您注册了一个鼠标事件。您从未注销过它。

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

还请记住，您应该只在页面开始时定义剑道拖放功能。

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

拖动山墙项目上的 Dragend 仅用于清理我正在使用的 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.
}