拖放Jquery -删除拖放时，它离开网格

EDIT:

有谁知道如何修复可拖放区域的闪烁当它经过它?看看当你点击栅格，并拖动栅格上方段落的栅栏块会发生什么。如果我能解决这个问题，这将是一个工作围绕我的整个问题。(一种方法，使可拖动的消失时，留下一个指定的不可拖放的div)。

我使用jquery拖放。我有一个栅格，栅栏碎片可以连接在上面。请参见[编辑]/dragndrop/3.html。如果你点击一个正方形的边界，栅栏块就会出现。如果你把栅栏块拖到网格外的一个指定的可拖放区域(它们位于网格的左右边缘)，我有一个函数可以删除它们。

我希望可拖拽的部分消失时，他们离开网格，而不必使用可拉区域。现在，只有当我将布局的其他部分设置为可拖放时，它们才会消失，然后对可拖放的项目进行一些操作，一旦它们被拖放到网格外的可拖放区域中。在大多数情况下，当人们离开"可拖拽"区域时，会让可拖拽项目消失。这样做的问题是，每当可拖拽对象移动到网格上的一个新的可拖拽正方形时，它就会被注册为离开可拖拽区域。

考虑到这些问题，我需要一种方法来完全删除可拖动的项目，如果它离开一个指定的div。这个指定的div不应该是可拖放的。现在，作为一项工作，我在网格的左右边缘设置了可拉放区域。

      $( ".droppable" ).droppable({
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {
            droppable = true;
            if(original){
                 var newDiv = $(ui.draggable);
                 //var newDiv = $(ui.draggable).clone();
                 newDiv.draggable({
                    stop: function( event, ui ) {
                        if(!droppable)
                            ui.helper.remove();
                    },
                    start: function( event, ui ) {
                        droppable = false;   
                    },
     });

    if  ($(this).hasClass('noHover')   )  {
         $(newDiv).remove();
    } 
     */
     //console.log('here we are' + $(this) );
    if  ($(this).hasClass('noHover')   )  {
         $(newDiv).remove();
    }
    if (!$(this).hasClass("col-xs-2 col-sm-2")) {
        //console.log('here we are' + $(this).text());
        $(this).removeClass('ui-state-hover');
        console.log(  $(this) ) 
        $(newDiv).remove();
        $(newDiv).css("display", "none");
    }
    /*