0

我正在从java脚本动态创建可拖动的div并附加到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'});

当我在 modal-body 中拖动项目时，项目会从 Modal-body 跳出并附加到 html 页面正文上的第一个可放置区域。我希望可拖动的留在模态体中，而不是跳到不同的或以前的可放置区域

4

0 回答 0