Kendo UI - 自定义拖放

Question

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

我已经走得很远了，我可以将单个物品放入我的放置目标中。 如果您查看我的 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 事件，而只使用剑道拖放功能来处理这个问题。为此，您需要声明放置目标。

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

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

drag-gable 项目上的 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.
}