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?

demo

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

Popular posts from this blog

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

python - How do I create a list index that loops through integers in another list -

c# - “System.Security.Cryptography.CryptographicException: Keyset does not exist” when reading private key from remote machine -