JQuery UI-Draggable - PullRequest
Новая
       5

JQuery UI-Draggable

0 голосов
/ 16 декабря 2018

Я динамически создаю перетаскиваемый div из сценария java и добавляю div, как показано ниже: 

$("#draggable2").append("<div class='panel panel-default cardpanel' id='" + data.CardID + "panelcard' > <div style='background-color:#1946ba; color:#ffffff;' class='panel-heading' id='" + data.CardID + "'>" + "<input type'text' class='one' value=" + data.CardID+ "> "  + data.Title +"<label   data-toggle='tooltip' data-placement='right' title='" +"Assigned Users:&#013;" + tab1 + "'   class='fa fa-users red-tooltip' style='font-size:20px;color:#f5f5f5; float:right;'> </label>" + "</div> <div    class='panel-body' id='" + data.CardID + "' >" + "<div class='col-xs-12' id='" + data.CardID + "'>" + data.Description  +  " </div> <span title='Create Child Cards' onclick='CreateChildcard(this);' style='font-size:24px; margin-left:-14px;  margin-top:20%; border:none;color:#1946ba; z-index:100;'  class='fa fa-plus-circle'></span> <span title='Block Card' onclick='GetBlockcard(this);' style='font-size:24px; margin-left:5px;border:none;color:#1946ba; z-index:100;'  class='fa fa-times-circle-o'></span> <span title='View Child Cards' onclick='ViewChildCards(this);' style='font-size:24px; margin-left:5px;border:none;color:#1946ba; z-index:100;'  class='fa fa-cc'></span> <span title='Due Date' onclick='GetCalendercard(this);' style='font-size:24px; margin-left:5px;border:none;color:#1946ba; z-index:100;'  class='fa fa-calendar'></span> <span title='Edit Card Details' onclick='EditCardDetails(this);' style='font-size:24px; margin-left:5px;border:none;color:#1946ba; z-index:100;'  class='fa fa-edit'></span> </div>   </div> </div>  ");
     var id =data.CardID +"panelcard"

       $("#"+id).draggable(
               {
                    containment: "#cards",
                    scroll: false
            });

      using below  code to position dropped item


      ( function() {
   $( "#draggable").droppable({
     drop: function( event, ui ) {
    $(this).append(ui.draggable.css({position: "relative", top:"2", left:"2"}))

    };

Все работает нормально, но у меня также есть модальный режим, в котором перетаскиваемые объекты в модальном теле создаются динамически с использованием javaСценарий, как показано ниже: 

$("#draggablechild1").append("<div class='panel panel-default cardpanelchild' id='" + data.CardID + "panelchildcard' > <div style='background-color:#1946ba; color:#ffffff;' class='panel-heading' id='" + data.CardID + "'>" + "<input type'text' class='one' value=" + data.CardID+ "> "  + data.Title +"<label   data-toggle='tooltip' data-placement='right' title='" +"Assigned Users:&#013;" + tab1 + "'   class='fa fa-users red-tooltip' style='font-size:20px;color:#f5f5f5; float:right;'> </label>" + "</div> <div    class='panel-body' id='" + data.CardID + "' >" + "<div class='col-xs-12' id='" + data.CardID + "'>" + data.Description  +  " </div>  <span title='Block Card' onclick='GetBlockcard(this);' style='font-size:24px; margin-left:5px;border:none;color:#1946ba; z-index:100;'  class='fa fa-times-circle-o'></span>  <span title='Due Date' onclick='GetCalendercard(this);' style='font-size:24px; margin-left:5px;border:none;color:#1946ba; z-index:100;'  class='fa fa-calendar'></span> <span title='Edit Child Card Details' onclick='EditChildCardDetails(this);' style='font-size:24px; margin-left:5px;border:none;color:#1946ba; z-index:100;'  class='fa fa-edit'></span> </div>   </div> </div> " );
        var id =data.CardID +"panelchildcard"

    $("#"+id).draggable({
        containment: '#childcards'});

Когда я перетаскиваю элементы в модальных телах, они выпрыгивают из модального тела и добавляются в первую выпадающую область в теле HTML-страницы.Я хочу, чтобы перетаскиваемые предметы оставались в модальном теле, а не прыгали в другую или предыдущую область, которую можно бросить

...