javascript - Continually fire mouseover event while dragging over an element jquery ui? -
hopefully makes sense. i'm creating drag , drop modal jquery ui. have code set fire function adjusts styling using "over" option. here's code.
function makedraggable(){ $(function(){ $( "tr[role='row']" ).draggable({ cursor: "none", cursorat: { top: 50, left: 50 }, containment: "body", scroll: false, delay: 200, start: function() { openmodal(); }, stop: function() { closemodal(); }, helper: function( event ) { return $( "<div class='drag-folder'><img src=<?php echo site_url("imgs/processicons/file_icon.svg");?>></div>" ); } }) }); makedroppable(); } function makedroppable(){ $(function(){ $( ".flex-item" ).droppable({ tolerance: 'pointer', over: function(event, ui) { $(this).find('.drag-container').css('height', (180 + (event.pagey / 5 ))); }, out: function(event, ui) { $(this).find('.drag-container').css('height', ''); }, drop: function(event, ui) { $('.drag-container').css('height', ''); } }) }); } function openmodal(){ var modal = $('.drag-modal'); modal.fadein(); } function closemodal(){ var modal = $('.drag-modal'); modal.fadeout(); } the effect i'm trying achieve this: user starts dragging on element, modal pops several different drop regions. aesthetic purposes, height of each drop region stretches vertically towards mouse. problem height adjusted using 'over' option fires once (when mouse enters element). there way can run code changes height every time mouse moves, while on element?
--edit--
it occurred me perhaps achieved using kind of while loop, haven't been able figure out solution doesn't crash page.
could use ondragover event?
js
function allowdrop(ev) { document.getelementbyid("div1").textcontent += " dragging! \n"; ev.preventdefault(); } function drag(ev) { ev.datatransfer.setdata("text", ev.target.id); } function drop(ev) { ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } html
<div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"> </div> <img id="drag1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%c3%97150&w=336&h=69" draggable="true" ondragstart="drag(event)" width="336" height="69"> css
#div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; font-size: 5px; }
Comments
Post a Comment