GoalModelEditor/FrontEnd/public/js/projectEdit/projectEdit.js
//deal with the operation after dropping the element
deal with the operation after dropping the element
deal with the operation after dropping the element
function drop_zone(clusterNumber) {
    $("#cluster_" + clusterNumber).on("dragover", function (e) {
        e.preventDefault();
    });
    $("#cluster_" + clusterNumber).on("drop", function (e) {
        e.preventDefault();
        $(".dd").nestable({
            onDragStart: function (l, e) {
                addNoChildrenClass();
            },
            callback: function (l, e) {
                appendCluster();
                removeCluster();
            },
            scroll: true
        });
        if (nowCopying) {
            let fromGoalList = $(nowCopying.parentNode.parentNode).hasClass(
                "goal-list"
            );
            let draggableWrapper = '<ol class="dd-list">';
            draggableWrapper += '<li class="dd-item">';
            let newNode = document.createElement("div");
            newNode.className = $(nowCopying).children("input")[0].className;
            newNode.setAttribute("id", "C_" + $($(nowCopying).children("input")[0]).attr("id"));
            newNode.setAttribute("onmouseenter", 'showButton(this)');
            newNode.setAttribute("onmouseleave", 'hideButton(this)');
            $(newNode).css("font-weight", "bold");
            newNode.classList.add("dd-handle");
            newNode.classList.add("dd-handle-style");
            let type = getType($($(nowCopying).children("input")[0]));
            let imagePath = getTypeIconPath(type);
            $(newNode).html('<img src=' + imagePath + ' class="mr-1 typeIcon" > ' +
                '<div class="goal-content" tabindex="-1" ' +
                'onblur="finishEditGoalInCluster($(this));"' + '>' +
                $(nowCopying).children("input")[0].value + '</div><img class="editButton non-draggable dragger" style="display: none" src="/img/edit-solid.svg"' +
                'onclick="event.stopImmediatePropagation(); editGoalInCluster(this)" ' +
                'onmousemove="event.stopImmediatePropagation()" onmouseup="event.stopImmediatePropagation()"' +
                'onmousedown="event.stopImmediatePropagation()"/><img class="deleteButton non-draggable dragger" style="display: none"' +
                'src="/img/trash-alt-solid.svg" onclick="event.stopImmediatePropagation(); handleDeleteGoalInCluster(this)"' +
                'onmousemove="event.stopImmediatePropagation()" onmouseup="event.stopImmediatePropagation()"' +
                'onmousedown="event.stopImmediatePropagation()"/>');
            draggableWrapper += newNode.outerHTML;
            draggableWrapper += "</li></ol>";
            let node = createElementFromHTML(draggableWrapper);
            if (fromGoalList) {
                if ($(this).children(".dd-empty")[0]) {
                    $(this)
                        .children(".dd-empty")[0]
                        .replaceWith(node);
                    appendCluster();
                }
                else {
                    $(this)
                        .children("ol")[0]
                        .appendChild(
                            createElementFromHTML(
                                '<li class="dd-item">' + newNode.outerHTML + "</li>"
                            )
                        );
                }
                addNoChildrenClass();
            }
            $(nowCopying).children("input").css("font-weight", "normal");
        }
    });
}
function drop_zone ( clusterNumber ) { $ ( "#cluster_" + clusterNumber ) . on ( "dragover" , function ( e ) { e . preventDefault ( ) ; } ) ; $ ( "#cluster_" + clusterNumber ) . on ( "drop" , function ( e ) { e . preventDefault ( ) ; $ ( ".dd" ) . nestable ( { onDragStart : function ( l , e ) { addNoChildrenClass ( ) ; } , callback : function ( l , e ) { appendCluster ( ) ; removeCluster ( ) ; } , scroll : true } ) ; if ( nowCopying ) { let fromGoalList = $ ( nowCopying . parentNode . parentNode ) . hasClass ( "goal-list" ) ; let draggableWrapper = '<ol class="dd-list">' ; draggableWrapper += '<li class="dd-item">' ; let newNode = document . createElement ( "div" ) ; newNode . className = $ ( nowCopying ) . children ( "input" ) [ 0 ] . className ; newNode . setAttribute ( "id" , "C_" + $ ( $ ( nowCopying ) . children ( "input" ) [ 0 ] ) . attr ( "id" ) ) ; newNode . setAttribute ( "onmouseenter" , 'showButton(this)' ) ; newNode . setAttribute ( "onmouseleave" , 'hideButton(this)' ) ; $ ( newNode ) . css ( "font-weight" , "bold" ) ; newNode . classList . add ( "dd-handle" ) ; newNode . classList . add ( "dd-handle-style" ) ; let type = getType ( $ ( $ ( nowCopying ) . children ( "input" ) [ 0 ] ) ) ; let imagePath = getTypeIconPath ( type ) ; $ ( newNode ) . html ( '<img src=' + imagePath + ' class="mr-1 typeIcon" > ' + '<div class="goal-content" tabindex="-1" ' + 'onblur="finishEditGoalInCluster($(this));"' + '>' + $ ( nowCopying ) . children ( "input" ) [ 0 ] . value + '</div><img class="editButton non-draggable dragger" style="display: none" src="/img/edit-solid.svg"' + 'onclick="event.stopImmediatePropagation(); editGoalInCluster(this)" ' + 'onmousemove="event.stopImmediatePropagation()" onmouseup="event.stopImmediatePropagation()"' + 'onmousedown="event.stopImmediatePropagation()"/><img class="deleteButton non-draggable dragger" style="display: none"' + 'src="/img/trash-alt-solid.svg" onclick="event.stopImmediatePropagation(); handleDeleteGoalInCluster(this)"' + 'onmousemove="event.stopImmediatePropagation()" onmouseup="event.stopImmediatePropagation()"' + 'onmousedown="event.stopImmediatePropagation()"/>' ) ; draggableWrapper += newNode . outerHTML ; draggableWrapper += "</li></ol>" ; let node = createElementFromHTML ( draggableWrapper ) ; if ( fromGoalList ) { if ( $ ( this ) . children ( ".dd-empty" ) [ 0 ] ) { $ ( this ) . children ( ".dd-empty" ) [ 0 ] . replaceWith ( node ) ; appendCluster ( ) ; } else { $ ( this ) . children ( "ol" ) [ 0 ] . appendChild ( createElementFromHTML ( '<li class="dd-item">' + newNode . outerHTML + "</li>" ) ) ; } addNoChildrenClass ( ) ; } $ ( nowCopying ) . children ( "input" ) . css ( "font-weight" , "normal" ) ; } } ) ; }
deal with the operation after dropping the element
deal with the operation after dropping the element
//when drag is over, prevent default event //activate nestable2 function // get type of dragged element // var type = $(e).children(".dd-handle").attr("class").split(" ")[0]; // console.log(type); //when start dragging, trigger addNoChildrenClass method // l is the main container // e is the element that was moved //when finish dropping, trigger these methods to make "dd-empty" is always one //enable auto scrolling method while dragging //console.log(nowCopying); //only when the input of the goal is not empty //whether the dropping element is from the goal list or the cluster //create new goal element in the cluster //copy the id, class, and value from the original dragged goal //set new element's id with "C_" prefix //console.log($(newNode).attr("id")); //add "onmouseenter" and "onmouseleave" to the new element //add font weight, class name to the new goal element //add classes to make it draggable and droppable //based on the type of the goal, show different images //set new element's inner elements, including an image showing the goal type, //goal's content and edit and delete button //console.log(node); //if the drag element comes from the goal list //if there is dd-empty (first time drag to here) //adding one new cluster after dropping //if no dd-empty, already not first time to drag here, there is ol (already has one element) //before start dragging, trigger addNoChildrenClass method //after dropping finished, change font style of the dragged element