Changes between Initial Version and Version 1 of Ticket #15053


Ignore:
Timestamp:
Sep 27, 2016, 8:17:31 AM (5 years ago)
Author:
Scott González
Comment:

There's a fair amount of code in that fiddle. If the problem is just with nested sortables, please reduce the test case to eliminate anything unrelated to the bug.

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #15053

    • Property Owner set to Bhumi Shah
    • Property Status changed from new to pending
  • Ticket #15053 – Description

    initial v1  
    11I have developed nested drag drop using jquery ui but it does not allow me to drop outside the 
    2 `.drop-container` div. Here is the jsfiddle to review:
    3 
    4 [FIDDLE][1]
     2`.drop-container` div. Here is the jsfiddle to review: http://jsfiddle.net/wsrbuef7/11/
    53
    64Once I drag item and drop it into the #list2 div, it is not working. How can i solve it?
    7 
    8 
    9   [1]: http://jsfiddle.net/wsrbuef7/11/
    10 
    11 Here is the code:
    12 
    13 JS:
    14 
    15     $(function() {
    16       $("#list2 .drop-container").sortable({
    17         connectWith: "#list1",
    18         over: function() {
    19           removeIntent = false;
    20         },
    21         out: function() {
    22           removeIntent = true;
    23         },
    24         beforeStop: function(event, ui) {
    25           itemContext = ui.item.context;
    26           if (removeIntent == true) {
    27             ui.item.remove();
    28             disp($("#list2").sortable('toArray'));
    29           }
    30           //console.log(itemContext);
    31    
    32         },
    33         receive: function(event, ui) {
    34           console.log(ui);
    35           console.log(event);
    36           var this_id = $(ui.item).attr("id");
    37           var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');
    38    
    39           $(itemContext).attr("id", this_id);
    40           $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
    41           $(itemContext).html(preview);
    42    
    43           //console.log(this_id);
    44           //console.log(preview);
    45    
    46         }
    47       });
    48       $("#list2").sortable({
    49     connectWith: "#list1",
    50     over: function() {
    51       removeIntent = false;
    52     },
    53     out: function() {
    54       removeIntent = true;
    55     },
    56     beforeStop: function(event, ui) {
    57       itemContext = ui.item.context;
    58       if (removeIntent == true) {
    59         ui.item.remove();
    60         disp($("#list2").sortable('toArray'));
    61       }
    62       //console.log(itemContext);
    63    
    64     },
    65     receive: function(event, ui) {
    66       console.log(ui);
    67       console.log(event);
    68       var this_id = $(ui.item).attr("id");
    69       var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');
    70    
    71       $(itemContext).attr("id", this_id);
    72       $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
    73       $(itemContext).html(preview);
    74    
    75       $("#list2 .drop-container").sortable({
    76         connectWith: "#list1",
    77         over: function() {
    78           removeIntent = false;
    79         },
    80         out: function() {
    81           removeIntent = true;
    82         },
    83         beforeStop: function(event, ui) {
    84           itemContext = ui.item.context;
    85           if (removeIntent == true) {
    86             ui.item.remove();
    87             disp($("#list2").sortable('toArray'));
    88           }
    89           //console.log(itemContext);
    90    
    91         },
    92         receive: function(event, ui) {
    93           console.log(ui);
    94           console.log(event);
    95           var this_id = $(ui.item).attr("id");
    96           var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');
    97    
    98           $(itemContext).attr("id", this_id);
    99           $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
    100           $(itemContext).html(preview);
    101    
    102           //console.log(this_id);
    103           //console.log(preview);
    104    
    105         }
    106        }); //.disableSelection()
    107       //console.log(this_id);
    108       //console.log(preview);
    109    
    110      }
    111      }); //.disableSelection()
    112      $("#list2").bind("sortupdate", function(event, ui) {
    113     //console.log($('#list2'));
    114     var result = $('#list2').sortable('toArray');
    115     var str = '';
    116     for (var i = 0; i < result.length; i++) {
    117       str += result[i] + "|";
    118       var tmp = "#" + result[i] + " .drop-container";
    119       if ($(tmp).length > 0) {
    120         $(tmp).each(function() {
    121           if ($(this).children("li").length) {
    122             str += $(this).parent()[0].id + "|";
    123             $(this).children("li").each(function() {
    124               str += this.id + "|";
    125    
    126             })
    127           }
    128         })
    129       }
    130     } //console.log(result);
    131     alert(str);
    132     });
    133     function disp(list) {
    134                 var a=[];
    135         for (var i=0;i<list.length;i++){
    136                         a.push(list[i]);
    137         }
    138         $( 'input' ).val(a.join('|'));
    139     }
    140 
    141     });
    142 
    143 HTML:
    144 
    145     <div class="workarea" style="border:1px solid green; width:60%; padding:0; margin:0 0 0 15px;float:left">
    146                         <h3>Your List</h3>
    147                         <ul id="list2" class="connectedSortable ui-sortable" style="width: 100%; min-height: 500px;">
    148                                 <li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="997">
    149                                         5.jpg                                                   
    150                                         <span class="pull-right">
    151                                                 <div class="text-right hroffset">
    152                                                         <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
    153                                                         <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
    154                                                 </div>
    155                                         </span>
    156                                 </li>
    157                                 <li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="998">
    158                                         6.jpg                                                   
    159                                         <span class="pull-right">
    160                                                 <div class="text-right hroffset">
    161                                                         <a data-toggle="modal" class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
    162                                                         <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
    163                                                 </div>
    164                                         </span>
    165                                 </li>
    166                                 <li class="ui-draggable ui-draggable-handle ui-state-default ui-sortable-handle" style="width: 500px; height: auto;" id="layoutdata_24_3">
    167                                         Layout4                                                                 
    168                                         <span class="pull-right">
    169                                                 <div class="text-right">
    170                                                         <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
    171                                                 </div>
    172                                         </span>
    173                                         <ul class="layout_panels" style="float:left">
    174                                                 <li id="119" data-layout_id="24" style="width: 481px;">
    175                                                         <span class="pancls pull-left">Panel: New ( 1360  X 768 ) </span><span class="pull-right"></span>
    176                                                         <div class="clearfix"></div>
    177                                                         <ul class="drop-container ui-sortable" style="width: 478px;">
    178                                                                 <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="1121">
    179                                                                         <span class="pull-left">1.jpg</span>
    180                                                                         <span class="pull-right">
    181                                                                                 <div class="text-right hroffset">
    182                                                                                         <a data-toggle="modal"class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
    183                                                                                         <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
    184                                                                                 </div>
    185                                                                         </span>
    186                                                                 </li>
    187                                                                 <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="433">
    188                                                                         <span class="pull-left">2.jpg</span>
    189                                                                         <span class="pull-right">
    190                                                                                 <div class="text-right hroffset">
    191                                                                                         <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
    192                                                                                         <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
    193                                                                                 </div>
    194                                                                         </span>
    195                                                                 </li>
    196                                                                 <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="996" >
    197                                                                         <span class="pull-left">4.jpg</span>
    198                                                                         <span class="pull-right">
    199                                                                                 <div class="text-right hroffset">
    200                                                                                         <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
    201                                                                                         <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
    202                                                                                 </div>
    203                                                                         </span>
    204                                                                 </li>
    205                                                                 <li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="995" >
    206                                                                         <span class="pull-left">3.jpg</span>
    207                                                                         <span class="pull-right">
    208                                                                                 <div class="text-right hroffset">
    209                                                                                         <a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
    210                                                                                         <a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
    211                                                                                 </div>
    212                                                                         </span>
    213                                                                 </li>
    214                                                         </ul>
    215                                                 </li>
    216                                         </ul>
    217                                 </li>
    218                         </ul>
    219                 </div>
    220 
    2215Want to drop item outside the panel area. How can i do it? Is there any issue in code?