I build drag and drop system, but when i try sort elements i get error
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 my html i getting a lot of 'block' divs, all empty. My 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>
....
here's jsfiddle http://jsfiddle.net/w9L3eorx/39/
i think my jquery version is not appropriate...
