js events

k33theod · 27 Οκτωβρίου 2018

Παιδεύομαι 2 μέρες τώρα με κάτι στη js

Θέλω να μετακινώ κάποια αντικείμενα από element σε element. Στο 1ο klick παίρνω το innerHTML εφόσον έχει κάτι μέσα και στο δεύτερο μεταφέρεται αυτό όπου κάνω click.

ajaxmonkey4hire · 27 Οκτωβρίου 2018

http://104.236.83.163/contentshift.html

<!doctype html>
<html>   
	<head>    
		<meta charset="utf-8"> 
		<title>Grab and Drop</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				var buffer = null;
				$('.selectables').click(function(e){
					e.preventDefault();
					if (buffer){
						$(this).html($(this).html()+buffer);
						buffer = null;
					}else{
						buffer = $(this).html()||null;
						$(this).empty();
					}
				});
			});
		</script>
		<style>
			.selectables{margin:0.5%;padding:0.5%;width:23%;min-height:32px;background-color:#ddf;}
		</style>
	</head>
	<body>
		<p class="selectables">
			Click to grab
		<p>
		<p class="selectables">
			Click to append
		<p>
		<p class="selectables">
			
		<p>
		<p class="selectables">
			
		<p>		
	</body>
</html>

κάτι σαν αυτό;

Επεξ/σία 27 Οκτωβρίου 2018 από ajaxmonkey4hire

k33theod · 27 Οκτωβρίου 2018

Ναι κάπως έτσι στο δικό μου όμως δεν δουλεύει για διάφορους λόγους. Ο βασικός είναι το e.target δεν είναι αυτό που θέλω.

Το html είναι εδώ https://github.com/k33theod/chess-2-players-javascript-drag-n-drop/blob/master/test.html και το css εδώ https://github.com/k33theod/chess-2-players-javascript-drag-n-drop/blob/master/chess_style.css

ajaxmonkey4hire · 28 Οκτωβρίου 2018

χωρίς να το έχω κοιτάξει σε βάθος, χρησιμοποιείς drag events και αυτά φαίνεται να λειτουργούν. Click events δεν βλέπω να έχεις πουθενά. Θέλεις να βάλεις και click events;

Ένα άλλο πράγμα που είδα είναι ότι δένεις τα events .setAttribute και όχι το ειδικό για την δουλειά .addEventListener.

k33theod · 28 Οκτωβρίου 2018

Ναι θέλω να αντικαταστήσω το drag με 2 κλικ. Έχω κάνει αυτό τελικά σήμερα που φαίνεται να δουλευει αλλά δεν είμαι σίγουρος

var click_nums=0;
var pawn_to_move='';
Tetragona.forEach( function handler(tet, index, olla) 
{   
    tet.addEventListener("click", function click_handler(ev)
    {
        if(click_nums==0)
        {
            if (ev.target.hasChildNodes())
            {   
                click_nums+=1;
                pawn_to_move=ev.target;
            }
        }
        else
        {
            if (ev.target.hasChildNodes())
            {
                ev.target.parentNode.replace_pawn(pawn_to_move);
                pawn_to_move='';
            }
            else
            {
                console.log(ev.target); 
                ev.target.set_pawn(pawn_to_move);
            }
            click_nums=0;
        }
    }, true)
} );

18 λεπτά πριν, ajaxmonkey4hire είπε

Ένα άλλο πράγμα που είδα είναι ότι δένεις τα events .setAttribute και όχι το ειδικό για την δουλειά .addEventListener.

όχι απλά περνάω τα attributes με js για να μην τα γράφω στο html.

Επεξ/σία 28 Οκτωβρίου 2018 από k33theod

marios28 · 28 Οκτωβρίου 2018

Δοκίμασε τα παρακάτω (από τα δικά σου).

//Drag n drop
//Tetragona.forEach(accept_drag);
//piece.forEach(make_dragable);

var click_nums=0;
var pawn_to_move='';

Tetragona.forEach(accept_click);

function accept_click(item)
{
	item.addEventListener("click", 
    
          function(ev) 
          {

              if(click_nums==0)
              {			
                  if (ev.target.hasChildNodes())
                  {  	
                      click_nums=1;		
                      pawn_to_move=ev.target;			
                  }		
              }
              else if(click_nums==1)
              {			
                  click_nums=0;

                  var attacker = pawn_to_move;
                  if (piece.includes(ev.target)){
                      ev.neu_target = ev.target.parentNode;
                  }
                  var x1 = parseInt(Tetragona.indexOf(attacker.parentNode)/8);
                  var y1 = Tetragona.indexOf(attacker.parentNode)%8;
                  var x2= parseInt(Tetragona.indexOf(ev.target)/8);
                  var y2 =Tetragona.indexOf(ev.target)%8;
                  if (ev.neu_target){
                      x2= parseInt(Tetragona.indexOf(ev.neu_target)/8);
                      y2 =Tetragona.indexOf(ev.neu_target)%8;
                  }
                  if (attacker.color==current_player)
                      move(x1,y1,x2,y2,ev);			
              }

          }
	
	, true)
}

Σύνδεση

js events

Προτεινόμενες αναρτήσεις

k33theod

ajaxmonkey4hire

k33theod

ajaxmonkey4hire

k33theod

marios28

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση