خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Dragable panel snaps to mouse location:

I have a page that has a button that is used to toggle show/hide of a
panel that can be dragged. So the first time I click on the show/hide button,
the panel shows fine and I can click on a child of the panel div element and
drag the panel.

Then I use the show/hide button to remove the panel.

Then I use show/hide to display the panel a second time:

As I move the mouse over the panel it snaps to the location of
the mouse, even though the button is not down. The panel will
follow the mouse location until I click the mouse. All subsequent
cycles of show/hide will do the same until I reload the page.

The test browser is Firefox v56.0.2 (64-bit), but I have noticed
similar behavior in other browsers:
Safari Version 10.0 (10602.1.50.0.10)

Here is the mouseup event handle in the drag code:

The element that is used as the drag target assigns changes in location
to the element.parentNode. So the target argument is the element.parentNode


Code:
var upHandler = function(target, e)
      {
        if(dragging === true)
        {
          f(!e)
            {
            e = window.event;
            }
          if(document.removeEventListener)
            {
            target.removeEventListener("mouseup", function(e){ moveHandler(target, e, deltaX, deltaY)}, true);
            target.removeEventListener("mousemove", function(e){ upHandler(target, e)}, true);
            dragTarget.removeEventListener('mousedown', function(e){ drag(dragTarget.parentNode, e)}, false)
            }
          if(e.stopPropagation)
          {
            e.stopPropagation()
          }
        else
          {
            e.cancelBubble = true;
          }
        dragging = false;
        }
              }
This is the code that initiates the dragging;
Code:
var dragTarget = {}
var getElement = function(a)
      {
        /*
        a: object listeral:
            {
              'id': string, target element id
              'left': string; int+"px" // x coordinate of upper left corner
              'top': string; int+"px"  // y coordinate of upper left corner.
            }
        */
        dragTarget = document.getElementById(a.id)
        if(dragTarget)
          {
            dragTarget.addEventListener('mousedown', function(e){ drag(dragTarget.parentNode, e)}, false)
            dragging = true;
          }
        else
          {
            alert('no target: '+a.id)
            return false;
          }
        }

برچسب: نویسنده: آیلین رضوانی تاريخ: يکشنبه 10 دی 1396 ساعت: 9:38

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه