剑道UI -自定义拖放

Kendo UI - Custom Drag and Drop

本文关键字：拖放 自定义 UI 剑道      更新时间：2023-09-26

我正在使用end- 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>

这是由于

$(".HalfPage").mouseenter()

在拖动结束函数中注册一个鼠标事件。你从来没有注销过。

我建议不要使用JQuery事件，而只使用kendo拖放功能来处理这个问题。要做到这一点，您需要声明您的放置目标。

还要记住，你应该在页面开始处定义剑道拖放功能。

在下面的例子中，我使用拖放目标功能来添加一个css类'。高亮-拖放区域'显示当前选择的拖放目标

拖放项上的拖放仅用于清理我正在使用的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.
}
相关文章：