Блог

Я работаю с перетаскиванием Kend-Ui. Мне пришлось настроить виджет, чтобы он работал для моего прототипа. Я понимаю, что это не совсем правильная реализация этого виджета, но он должен работать для моих целей прототипирования.

Я продвинулся довольно далеко, я могу добавлять отдельные элементы в свою цель. Если вы посмотрите на мой js, вы можете увидеть, что я показываю содержимое, когда я помещаю содержимое в свою цель. Вот где возникает моя проблема. У меня есть 2 цели для удаления, но я хочу показывать содержимое только в цели для удаления, для которой я использую элемент списка.

После того, как я отпущу элемент и перемещу мышь в цель перетаскивания и из нее, событие продолжает запускаться? Должен ли выпуск объекта не останавливать это? Я не могу понять, что происходит? Как я могу остановить эту функцию при реализации объекта?

Кто-нибудь может понять, почему это происходит? Я думал, что добавление и идентификатор к цели удаления исправит это, но, похоже, это не помогает?

 <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 для обработки этого. Для этого вам нужно будет объявить свои цели перетаскивания.

Также помните, что вы должны просто определить функциональность перетаскивания kendo в начале страницы.

В приведенном ниже примере я использую функцию drop target для добавления css-класса ‘.highlight-droparea’, чтобы показать, какая цель drop выбрана в данный момент.

Перетаскивание перетаскиваемых элементов используется просто для очистки 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.
}