Wählen Sie Zellen in einer Tabelle durch Ziehen

Ich schaute auf this question und sah den Verweis auf das iPhone-Spiel, wo Sie über den Bildschirm ziehen Buchstaben während Sie gehen ziehen.Wählen Sie Zellen in einer Tabelle durch Ziehen

Ich war neugierig, eine Auswirkung davon in Javascript mit Tabellen zu sehen. Also würden Sie die Maus über jede Zelle ziehen, die sie dann markieren würden.

Ich bin mir nicht sicher, was die beste Methode wäre, aber ich hoffe, jemand hat eine Chance. Jemand versuchte es here, aber es funktioniert nicht wirklich.

alt text

Dank Cacoo für die sexy Diagramme. Es ist wie eine Online-Visio, wirklich nett. Check it out;)

Quelle

2010-01-06 Ben Shelock

Interessante Herausforderung (und Diagramme). Der Trick wird die Standardtextauswahl im Browser zu verhindern ... – tbeseda

Hier ist ein funktionierender Prototyp: http://jsfiddle.net/few5E/ Verwendung von jQuery für DOM-Hooking, könnte aber leicht mit einem anderen Framework implementiert werden.

Aktualisieren: http://jsfiddle.net/Brv6J/ eine etwas andere Version - der hervorgehobene Status ändert sich nur, wenn Sie die Maustaste loslassen und erneut klicken.

Update 2: http://jsfiddle.net/Brv6J/3/ - Bindung onselectstart, so dass Text in IE nicht ausgewählt ist.

Einige relevanten Fakten:

MouseDown- Ereignis der Tabellenzellen werden den tatsächlichen Klick verfolgen verhakt. Dieses Ereignis wird gestoppt, sodass die Textauswahl behindert wird. Auch Bindung ontext select für den gleichen Effekt in IE.
Das MouseOver-Ereignis schaltet die hervorgehobene Klasse für die Zelle um
Das MouseOut-Ereignis wird auf document gehakt. Dies ist sicherzustellen, dass es immer ausgeführt wird. Wenn das MouseUp-Ereignis in der Tabellenzelle verankert ist, wird es nicht ausgelöst, wenn Sie die Maustaste loslassen, während sich die Maus außerhalb der Tabelle befindet. Dieser Status wird in isMouseDown verfolgt.

Der vollständige Quellcode Referenz:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title></title> 
    <style type="text/css" media="screen"> 
    table td { 
     width:100px; 
     height:100px; 
     text-align:center; 
     vertical-align:middle; 
     background-color:#ccc; 
    } 

    table td.highlighted { 
     background-color:#999; 
    } 
    </style> 
</head> 
<body> 
    <table cellpadding="0" cellspacing="1" id="our_table"> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>d</td> 
     <td>e</td> 
     <td>f</td> 
    </tr> 
    <tr> 
     <td>g</td> 
     <td>h</td> 
     <td>i</td> 
    </tr> 
    </table> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
     var isMouseDown = false; 
     $("#our_table td") 
     .mousedown(function() { 
      isMouseDown = true; 
      $(this).toggleClass("highlighted"); 
      return false; // prevent text selection 
     }) 
     .mouseover(function() { 
      if (isMouseDown) { 
      $(this).toggleClass("highlighted"); 
      } 
     }) 
     .bind("selectstart", function() { 
      return false; // prevent text selection in IE 
     }); 

     $(document) 
     .mouseup(function() { 
      isMouseDown = false; 
     }); 
    }); 
    </script> 
</body> 
</html>

Quelle

2010-01-06 15:48:40

Interessant, dass Sie toggleClass verwenden ... Wenn Sie in diesem Fall zu einer bereits ausgewählten Zelle zurückkehren, wird die Auswahl aufgehoben. Dies kann auf der Grundlage der Anwendungslogik korrekt sein oder auch nicht. Intuitiv (und wie ich es in meiner Lösung mache) halte ich alle bis zum Mouse Up ausgewählt. – Jaanus

Siehe alternativer Link :) Einfach hinzugefügt. –

Die Verwendung von toggleClass ist sozusagen ein Hack. In einer geeigneten testbaren Implementierung der Einheit würden Sie eine Instanz mit einem booleschen Wert oder etwas in der Art verwenden. –

http://www.jaanuskase.com/stuff/dragSelect.html

Nicht sicher, ob Sie rein Javascript Implementierung wollte, benutzte ich jQuery für die Bequemlichkeit.

Quelle

2010-01-06 15:43:29 Jaanus

Wie auch immer, Sie können dies leicht umgestalten, um auch Touch-Events zu unterstützen. – hlyates

@hlysat einen Ratschlag, wie man etwas so umgestalten kann, um Berührungsereignisse zu unterstützen? – maco1717

Wenn Sie nach tabellenähnliche Zellauswahl sind (in Spalten-/Zeilenblöcke), müssen Sie jede Zelle in jeder Zeile markieren, die zwischen Ihrem ist Start & Ende Index (beide Zeilen und Zelle) in der Mouseover-Ereignisse:

for (var i = rowStart; i <= rowEnd; i++) { 
    var rowCells = table.find("tr").eq(i).find("td"); 
    for (var j = cellStart; j <= cellEnd; j++) { 
     rowCells.eq(j).addClass("selected"); 
    }   
}

Wenn der Benutzer starten können Sie Zellen aus allen Richtungen (oben-unten, von unten nach oben, rechts-links, links-rechts) Auswählen müssen die richtigen zuweisen Indizes für Start & Ende.

Hier ist ein jsFiddle.

Quelle

2015-08-07 11:13:19 Martin

Besser, Sie würden Dojo oder jQuery (oder etwas noch höherwertiges) verwenden – paulsm4

Add 'table. find (". selected"). removeClass ("selected"); 'in der' mouseover'-Funktion, um es Tabellenkalkulations-ähnlicher zu machen, dh die Zellen abzuwählen, wenn man sich über einen ausgewählten Bereich bewegt. Aktualisiert [Geige] (http://jsfiddle.net/chechs/qvw0pgcu/22/) – User528491

@ User528491 Guter Ort. Basisgeige aktualisiert. Vielen Dank. – Martin

Wählen Sie Zellen in einer Tabelle durch Ziehen

Antwort

Verwandte Themen