jquery sortierbar nicht Eigentum 'top'

Question

ich bauen Drag-and-Drop-System lesen, aber wenn ich sort Elemente versuchen, erhalte ich Fehler

Uncaught TypeError: Cannot read property 'top' of undefined at e.(anonymous function).(anonymous function)._mouseDrag (jquery-ui.min.js:12:536) at e.(anonymous function).(anonymous function)._mouseDrag (jquery-ui.min.js:6:7983) at e.(anonymous function).(anonymous function)._mouseStart (jquery-ui.min.js:12:191) at e.(anonymous function).(anonymous function)._mouseStart (jquery-ui.min.js:6:7983) at e.(anonymous function).(anonymous function)._mouseMove (jquery-ui.min.js:6:15443) at e.(anonymous function).(anonymous function)._mouseMove (jquery-ui.min.js:6:7983) at HTMLDocument.n._mouseCapture._mouseDistanceMet._mouseDelayMet._mouseMoveDelegate (jquery-ui.min.js:6:14949) at HTMLDocument.dispatch (jquery-2.1.1.min.js:3:6404) at HTMLDocument.r.handle (jquery-2.1.1.min.js:3:3179)

In meinem html ich viel 'block' divs bekommen, alle leer. Mein Code:

$('#elements_Button').on('click', function(){ 
    var origin = 'sortable'; 
    //var $iframe = $('#courseBuilder_PageFrame'); 
    $('.card-element').draggable({ 
      helper: function(e) { 
       return $('<div>').addClass('block').text($(e.target).text())); 
      }, 
      containment:'body', 
      iframeFix: true, 
      connectToSortable:$('#courseBuilder_PageFrame').contents().find('.container').sortable({ 
       iframeFix: true 
      }), 
     // revert: "invalid", 
      start: function() { 
       origin = 'draggable'; 
      } 
     }); 
    $('#courseBuilder_PageFrame').contents().find('.container').droppable({ 
     iframeFix: true, 
     drop: function (event, ui) { 
       if (origin === 'draggable') { 
        ui.draggable.html(Course.getElementByName(ui.draggable.text())); 
        console.log(ui.draggable); 
        origin = 'sortable'; 
       } 
      } 

     }); 
}); 

Html:

<div class="row block card-content card-element ui-draggable ui-draggable-handle"> 
<span class="card-title activator grey-text text-darken-4">Header</span> 

<div class="container ui-sortable ui-droppable">    
    <div class="row block card-content card-element ui-draggable ui-draggable-handle" style="display: block;"> 
     <div class="col l12 m12 s12 header2">     
     <h1 class="4s-editable">C-40Ai Aircraft</h1>     
    </div>   
</div> 
.... 

hier jsfiddle http://jsfiddle.net/w9L3eorx/39/

Ich denke, meine Jquery-Version nicht geeignet ist ...

Answer 1

Die Lösung bestand darin, die neueste Version von jquery-ui v1.12.1 zu verwenden.