IE 11 - Prob

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • IE 11 - Prob

    Mahlzeit.
    Das Script soll das draggen von divs erlauben. Was bisher wunderbar mit dem
    IE funktioniert hat. Seit IE 11 gibts hier ein Problem welches ich mit der Konsole und debuggen nicht finden kann.
    Es wird nämlich kein Fehler oder eine Warnung ausgespuckt sondern still ignoriert. Sprich: Das draggen ist nicht möglich.

    Hier wird jetzt der IE als Gecko erkannt.
    Ich habe bereits einen IE11 detect eingebaut und die Variablen für den MSIE
    zugewiesen. Wenn das Ereignis dann eintrifft, wird eine Fehlermeldung ausgespuckt.
    Er hat dann Probleme mit "document.attachEvent("onmousemove", dragGo);"
    Aktuell ist die IE11 kennung wieder raus. Das Scriptist so also original.

    Kann da jemand helfen?

    Code:
    function Browser() {
     
      var ua, s, i;
     
      this.isIE    = false;
      this.isNS    = false;
      this.version = null;
     
      ua = navigator.userAgent;
     
      s = "MSIE";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
      }
     
      s = "Netscape6/";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
      }
     
      // Treat any other "Gecko" browser as NS 6.1.
     
      s = "Gecko";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = 6.1;
        return;
      }
    }
     
    var browser = new Browser();
     
    // Global object to hold drag information.
     
    var dragObj = new Object();
    dragObj.zIndex = 0;
     
    function dragStart(event, id) {
     
      var el;
      var x, y;
     
      // If an element id was given, find it. Otherwise use the element being
      // clicked on.
     
      if (id)
        dragObj.elNode = document.getElementById(id);
      else {
        if (browser.isIE)
          dragObj.elNode = window.event.srcElement;
        if (browser.isNS)
          dragObj.elNode = event.target;
     
        // If this is a text node, use its parent element.
     
        if (dragObj.elNode.nodeType == 3)
          dragObj.elNode = dragObj.elNode.parentNode;
      }
     
      // Get cursor position with respect to the page.
     
      if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
          + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
          + document.body.scrollTop;
      }
      if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
      }
     
      // Save starting positions of cursor and element.
     
      dragObj.cursorStartX = x;
      dragObj.cursorStartY = y;
      dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
      dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
     
      if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
      if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
     
      // Update element's z-index.
     
      dragObj.elNode.style.zIndex = ++dragObj.zIndex;
     
      // Capture mousemove and mouseup events on the page.
     
      if (browser.isIE) {
        document.attachEvent("onmousemove", dragGo);
        document.attachEvent("onmouseup",   dragStop);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
      }
      if (browser.isNS) {
        document.addEventListener("mousemove", dragGo,   true);
        document.addEventListener("mouseup",   dragStop, true);
        event.preventDefault();
      }
    }
     
    function dragGo(event) {
     
      var x, y;
     
      // Get cursor position with respect to the page.
     
      if (browser.isIE) {
        x = window.event.clientX + document.documentElement.scrollLeft
          + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop
          + document.body.scrollTop;
      }
      if (browser.isNS) {
        x = event.clientX + window.scrollX;
        y = event.clientY + window.scrollY;
      }
     
      // Check object isnt being dragged off screen
     
         var w = 0, h = 0;
    
       // check browser type and get window sizes
         if( typeof( window.innerWidth ) == 'number' )
       {
           // Non-IE
           w = window.innerWidth;
          h = window.innerHeight;
        }
       else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
       {
           // IE 6+ in 'standards compliant mode'
           w = document.documentElement.clientWidth;
           h = document.documentElement.clientHeight;
         }
       else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
       {
           // IE 4 compatible
           w = document.body.clientWidth;
           h = document.body.clientHeight;
         }
    
       if( x < 30 )
       {
          x = 30;
       }
       
       if( x > (w - 30) )
       {
          x = w - 30;
       }
       
       if( y < 30 )
       {
          y = 30;
       }
       
       if( y > (h - 30) )
       {
          y = h - 30;
       }
    
      // Move drag element by the same amount the cursor has moved.
    
      dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
      dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
     
      if (browser.isIE) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
      }
      if (browser.isNS)
        event.preventDefault();
    }
     
    function dragStop(event) {
     
      // Stop capturing mousemove and mouseup events.
     
      if (browser.isIE) {
        document.detachEvent("onmousemove", dragGo);
        document.detachEvent("onmouseup",   dragStop);
      }
      if (browser.isNS) {
        document.removeEventListener("mousemove", dragGo,   true);
        document.removeEventListener("mouseup",   dragStop, true);
      }
    }

  • #2
    Warum verwendest du nicht ein JavaScript-Framework wie jQuery? Dann bräuchtest du dir um Browser-Kompatibilität keine Gedanken machen.

    Kommentar


    • #3
      Das hab ich schon gemacht. Allerdings ergeben sich in meinem Programm entsprechende Probleme.
      Sobald ich die jquery ui dragging implementiere und
      auf meine divs anwende, ergibt sich das Problem, das der gesamte div Container
      draggable ist und zwar werden alle Kind elemente die sich darin befinden
      mit angesprochen. Da es sich bei mir um einen chat handelt, also (ziehbare privatfensterchen)
      muss und soll der Text Container, nicht auf klick draggable sein. Auch das scrollen funktioniert so nicht.
      Ansonsten wäre ich mit der JQuery Lösung echt zufrieden. Aber auch habe ich festgestellt,
      (weil ich im mom JQuery drag im Einsatz habe [Notlösung] ) diverse User starke Performanceprobleme haben.

      Bei mir ist das der Div so aufgebaut.

      Div Container
      title
      textfenster
      input field
      tools

      mit meinem Script wird das gesamte div mit dem mousdown event auf das title div aktiv und deaktiv sobald ich es loslasse.
      So kann das fenster nur dann verschoben werden wenn man es am title anfässt.
      Mit Jquery soll das wohl so nicht funktionieren. Und wenn ja, bin ich für diese Lösung gerne offen

      edit: das ist das privat.js

      Code:
      var privateChat = 0;
      
      function createPChatDiv(divPName,divToName,dPID,duID)
      {
      	if(privateChat == 1)
      	{
      		showInfoBox("system","200","300","200","",lang30);
      		return false;
      	}
      
      	// to user
      	if(divToName!=userName)
      	{
      		var uUser = divToName;
      	}
      	else
      	{
      		var uUser = divPName;
      	}
      
      	// window title
      	var pTitle = uUser;
      
      	// div name
      	divPName = duID+"_"+dPID;
      	
      	// prevent duplicate private chat windows 
      	if(document.getElementById(dPID+"_"+duID))
      	{
      		document.getElementById(dPID+"_"+duID).style.visibility = 'visible';
      		document.getElementById("pcontent_"+dPID+"_"+duID).style.visibility = 'visible';
      		document.getElementById("pmenuBar_"+dPID+"_"+duID).style.visibility = 'visible';
      		document.getElementById("psendbox_"+dPID+"_"+duID).style.visibility = 'visible';
      		document.getElementById("pmenuWin_"+dPID+"_"+duID).style.visibility = 'visible';	
      		
      		return false;
      	}	
      
      	// if div exists
      	if(!document.getElementById(divPName))
      	{
      		// create div
      		var ni = document.getElementById("pWin");
      
      		var newdiv = document.createElement('div');
      		newdiv.setAttribute("id",divPName);
      		newdiv.className = "pChatWin";
      
      		// title
      		newdiv.innerHTML = "<div doFocus(\""+divPName+"\")' id='ptitle_"+divPName+"' class='ptitle' style='cursor:move;' onclick=doFocus(\""+divPName+"\")> <span style='float:left;'>&nbsp;<img style='vertical-align:middle;' src='avatars/online.gif'>&nbsp;"+decodeURI(pTitle)+"</span> <span style='float:right;'><span style='cursor:pointer;' onclick='minPwin(\""+divPName+"\",\""+divPName+"\")'><img src='images/min.gif'></span>&nbsp;<span style='cursor:pointer;' onclick='closePWin(\""+divPName+"\");privateChatCount();'><img src='images/close.gif'></span>&nbsp;</div>";
      
      		// content
      		newdiv.innerHTML += "<div id='pcontent_"+divPName+"' class='pcontent'></div>";
      
      		// menu
      		newdiv.innerHTML += "<div id='pmenuBar_"+divPName+"' class='pmenuBar'></div>";
      
      		// sendbox
      		newdiv.innerHTML += '<div id=\'psendbox_'+divPName+'\' class=\'psendbox\'><input type=\'text\' id=\'poptionsBar_'+divPName+'\' class="poptionsBar" onKeyPress="return submitenter(this,event,\'poptionsBar_'+divPName+'\',\'pcontent_'+divPName+'\',\''+uUser+'\');" onfocus="changeMessBoxStyle(\'poptionsBar_'+divPName+'\');"></textarea><input id="poptionsSend" class="poptionsSend" type="button" value="'+lang31+'" onclick="sendPMessage(\''+uUser+'\',\'poptionsBar_'+divPName+'\',\'pcontent_'+divPName+'\')"></div>';
      
      		// menu win
      		newdiv.innerHTML += "<div id='pmenuWin_"+divPName+"'></div>";
      
      		ni.appendChild(newdiv);
      
      		// add menu
      		optionsMenu('pmenuBar_'+divPName, 'poptionsBar_'+divPName, 'pcontent_'+divPName, 'pmenuWin_'+divPName);
      
      		// focus window
      		doFocus(divPName);
      
      		// priv drag
      		$( "#"+divPName ).draggable();		
      
      		// resize window
      		
      		/*
      		$( "#"+divPName ).resizable({
      			minHeight: 300,
      			minWidth: 444
      			}).position( { of: $(this), my: 'center center', at: 'center center' } );			
      		*/
      	}
      
      
      }
      wobei hier jetzt das onmousedown event im title div nicht enthalten ist, weil jquery halt im Moment drin ist
      Zuletzt geändert von Marcus-24-D; 07.12.2013, 18:19.

      Kommentar


      • #4
        Du musst nicht jQuery UI Draggable verwenden, sondern jQuery alleine wäre ja auch schon eine Verbesserung. Mir wird nur schlecht, wenn ich die vielen Browser-Weichen in dem Code sehe. Das ist doch überhaupt nicht wartbar. Und dann die ganze Arbeit investieren, nur damit dir das Ding beim IE12 wieder um die Ohren fliegt?
        Zuletzt geändert von h3ll; 07.12.2013, 18:21.

        Kommentar


        • #5
          Ich hab mein beitrag eben editiert. siehe oben
          Zum draggen brauch ich nicht die ui ?
          Kannst du mir da nen Beispiel machen wie das funktionier?

          Kommentar


          • #6
            zB. Create a Windows-like Interface with jQuery UI | Nettuts+

            Kommentar


            • #7
              ah okay, das werd ich mir mal zu gemüt führen..jetzt... danke. wenn ich nen prob kriege, schrei ich nochmal diesbezüglich

              Kommentar


              • #8
                Melde mich nochmal zurück. Ich verstehe hier etwas nicht ganz denk ich.
                Wo ist hier die drag Funktion difiniert? Legt das die jQ UI anhand der classen fest?

                Code:
                var _init = $.ui.dialog.prototype._init;
                		$.ui.dialog.prototype._init = function() {
                			_init.apply(this, arguments);
                			
                			var dialog_element = this;
                			var dialog_id = this.uiDialogTitlebar.next().attr('id');
                			
                			this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
                			'-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
                			'<span class="ui-icon ui-icon-minusthick"></span></a>');
                			
                			$('#dialog_window_minimized_container').append(
                				'<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
                				dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
                				'<span class="ui-icon ui-icon-newwin"></div>');
                				
                			$('#' + dialog_id + '-minbutton').hover(function() {
                				$(this).addClass('ui-state-hover');
                			}, function() {
                				$(this).removeClass('ui-state-hover');
                			}).click(function() {
                				dialog_element.close();
                				$('#' + dialog_id + '_minimized').show();
                			});
                			
                			$('#' + dialog_id + '_minimized').click(function() {
                				$(this).hide();
                				dialog_element.open();
                			});
                		};
                		
                		
                		
                		
                		
                		
                		
                		
                $(document).ready(function() {
                				$('#create_button').button().click(function() {
                					var create_dialog = $('#dialog_window_1');
                					var create_button = $(this);
                					if( create_dialog.dialog('isOpen') ) {
                						create_button.button('option', 'label', 'Create a new Window');
                						create_dialog.dialog('close');
                					} else {
                						create_button.button('option', 'label', 'Close Window');
                						create_dialog.dialog('open');
                					}
                				});
                				
                				$('#dialog_window_1').dialog({
                					width: 'auto',
                					height: 'auto',
                					autoOpen : false,
                					buttons: [
                						{
                							text: 'Create',
                							click: function() {
                								var div_count = $('.dialog_window').length + 1;
                								var div_id = 'dialog_window_' + div_count;
                								var div_title = $('#new_window_title').val();
                								var div_content = $('#new_window_content').val();
                								var buttons = new Array();
                								if( $('#alertbutton').is(':checked') ) {
                									buttons.push({
                										text: 'ALERT',
                										click: function() {
                											alert('ALERTING from Dialog Widnow: ' + div_title);
                										}
                									});
                								}
                								
                								if( $('#closebutton').is(':checked') ) {
                									buttons.push({
                										text: 'CLOSE',
                										click: function() {
                											$('#' + div_id).dialog('close');
                										}
                									});
                								}
                								
                								$('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');
                				
                								var dialog = $('#' + div_id).dialog({
                									width: 'auto',
                									height: 'auto',
                									title : div_title,
                									autoOpen : true,
                									buttons: buttons
                								});
                							}
                						}
                					]
                				});
                				$('#buttonlist').buttonset();
                			});

                Kommentar


                • #9
                  ich hab jetzt sowas hier. funktioniert zwar, weiß aber nicht ob das so gesund ist oder nicht?!

                  Code:
                  $( "#"+divPName ).draggable({handle:"#ptitle_"+divPName});

                  Kommentar

                  Lädt...
                  X