javascript - cannot get draggable working -
im trying implement similiar this
however using table (datatable()) instead of div using.
its seems though method packs data object being passed drop container/callback cannot find of external-event classes
so in drop callback end undefined eventobject
function populateworkorders(){ var workorderstablebody = document.getelementbyid("workorderstablebody");//link containing element using getelementbyid or similar (i=0;i<workorders.length;i++) { //loops length of list var tr=document.createelement('tr'); //creates <ul> element tr.setattribute("class","external-event"); tr.setattribute("draggable","true"); var workorderid=document.createelement('td'); //chrome seems not variable "name" in instance workorderid.innerhtml=workorders[i].workorderid; //adds name tr.appendchild(workorderid); var workordertitle=document.createelement('td'); workordertitle.innerhtml=workorders[i].workordertitle; tr.appendchild(workordertitle); var workorderaccount=document.createelement('td'); workorderaccount.innerhtml=workorders[i].workorderaccount; tr.appendchild(workorderaccount); var workorderpriority=document.createelement('td'); workorderpriority.innerhtml=workorders[i].workorderpriority; tr.appendchild(workorderpriority); workorderstablebody.appendchild(tr); } //this whats not running , seems cant find $('#external-events tr.external-event').each(function() { var eventobject = { title: "fulltitle"//$.trim($(this).data) // use element's text event title }; // store event object in dom element can later $(this).data('eventobject', eventobject); // make event draggable using jquery ui $(this).draggable({ zindex: 999, revert: true, // cause event go revertduration: 0 // original position after drag }); }); $('#workorderstable').datatable(); }
this ends producing 
it seems append "odd" , "even" class name. rid of can surround (under table) in div tag breaks datatables() , still doesnt fix issue .
here html:
<title>title</title> <script type="text/javascript" src="js/libs/jquery/jquery.js"></script> <script type="text/javascript" src="js/indexjs.js"></script> </head> <body> <div> <!--had load separate full calender lib else there conflicts--> <script type="text/javascript" src="js/libs/datatables/media/js/jquery.datatables.js"></script> <table class="display" id="workorderstable"> <thead> <tr> <th>id</th> <th>title</th> <th>account</th> <th>priority</th> </tr> </thead> <tbody id="workorderstablebody"> </tbody> </table> </div> <script> populateworkorders(); </script> <br> <div> <select id="technicianserviceteamselectordropdown" style="width:25%" onchange="populatetechnicians();"></select> <br> <select id="technicianselectordropdown" style="display:none; width:25%" onchange="populatecalendar()"></select> <script> populatetechniciansserviceteams(); </script> </div> <br> <div id='calendar'> <!--had load separate data tables lib else there conflicts--> <script type="text/javascript" src='js/libs/fullcalendar/lib/jquery.min.js'></script> <script type="text/javascript" src='js/libs/fullcalendar/lib/moment.min.js'></script> <script type="text/javascript" src='js/libs/fullcalendar/fullcalendar.js'></script> </div> </body> so above shows draggable elements. here code drop.
$(document).ready(function() { $('#calendar').fullcalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaweek,agendaday' }, editable: false, droppable: true, // allows things dropped onto calendar !!! drop: function(date, allday) { // function called when dropped // retrieve dropped element's stored event object var originaleventobject = $(this).data('eventobject'); console.log(originaleventobject); // need copy it, multiple events don't have reference same object var copiedeventobject = $.extend({}, originaleventobject); // assign date reported //copiedeventobject.title = "h"; copiedeventobject.start = date; copiedeventobject.allday = true; // render event on calendar // last `true` argument determines if event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderevent/) $('#calendar').fullcalendar('renderevent', copiedeventobject, true); } }); });
well, first off, don't see id="external-events" anywhere on image provided i'm not sure bind set to. did change id name @ point during development?
second, when i've done stuff in past, found easiest create string actual html code in follows:
var html = '<td id="' + theid + '" class="' + theclass + '" >' + sometext + '</td>'; then @ end use jquery .append() or .html() depending on happening:
$('#mytable').append(html); i don't know if helps i've had lot of success method.
for setting draggable events, there few options: can use jquery's draggable if need. i've done manually before, using .on('mousedown'.....) start event, .on('mousemove', ...) change left attribute, , .on('mouseup', ...) end it. worked better me when dragable more complex.
hope helps.
Comments
Post a Comment