CODEWITHSUNDEEP
javascriptdrag-and-dropkendo-uikendo-asp.net-mvc
Mark
Mark

Reputation: 4883

Kendo UI - Custom Drag and Drop

I'm working with Kend-Ui drag and drop. I've had to customize the widget to make it work for my prototype. I realize this is not exactly the correct implementation of this widget, but it should work for my prototyping purposes.

I've got pretty far, I'm able to drop individual items into my drop target. If you look at my js, you can see that I am showing content when I drop the content on my target. This is where my problem is happening. I have 2 drop targets, but I only want to show content in the drop target i realease the list item on.

After I release the item, and move my mouse in and out of the drop target, the event keeps fireing? Should the release of the object not stop this? I can't figure out what is going on? How can I stop this function on the realease of the object?

Can anyone see why this is happening? I thought adding and ID to the drop target would fix this, but this does not seem to help?

<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>

Upvotes: 0

Views: 2642

Answers (1)

Jonathan Buchanan
Jonathan Buchanan

Reputation: 878

It is due to this 

$(".HalfPage").mouseenter()

In your Drag end function you register a mouse event. You never unregistered it.

I would suggest to instead not even use JQuery events and just use the kendo Drag and Drop features to handle this. To do this you will need to declare your drop targets.

Also remember you should just define kendo drag and drop functionality on page start.

In the example below I use the drop target functionality to add a css class '.highlight-droparea' to show which drop target is currently selected.

Dragend on the drag-gable items is merely used to clean up the DOM and CSS I was using.

$(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.
}

Upvotes: 2

Related Questions