php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr
[Erledigt] JQuery Draggable eigene Sektion geben [Erledigt] JQuery Draggable eigene Sektion geben
Wiki Registrieren Grundlagen Suchen Heutige Beiträge Alle Foren als gelesen markieren

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 24.01.2012, 12:14  
Benutzer
 
Registriert seit: 06.10.2011
Beiträge: 79
PHP-Kenntnisse:
Anfänger
Moewe ist in Verruf geraten
Standard [Erledigt] JQuery Draggable eigene Sektion geben
Hi,

habe dank diesem Forum mit JQuery eine nette Drag n Drop Lösung gefunden.

Hab diesbezüglich aber noch ein paar Fragen.
Erstmal den Code:
Interface.php
PHP-Code:
<link type=''text/css' href='layout.css' rel='Stylesheet' />    
<?php
$merker=2;
$TicketArray = array("draggable","draggable2","draggable3","draggable4","draggable5","draggable6","draggable7");
Include "DragDropScript.php";
echo"
<div id='div-ticketbox'>
<table Border='0'>";
foreach ($TicketArray as $ticket)
{  $count++;   
   if ($merker==2)
   {      
      echo"
      <tr>";      
   }
      echo"
      <td>
      <div id='".$ticket."' class='ui-widget-content'>
      <p>Kunde ".$count."</p>
      <p><img src='ticket_preview.jpg' height='50px' width='100px'></p>
      </div>
      </td>";
   if ($merker==2)
   {
      $merker = 0;
      echo"
      </tr>";
   }   
   $merker++;   
}
echo"
</table>
</div>
<div id='div-Droparea'>
   <div id='droppable' class='ui-widget-header'>
      <p>Drop here</p>
   </div>
   <div id='droppable2' class='ui-widget-header'>
      <p>Drop here</p>
   </div>
</div>";

?>
DragDropScript.php
PHP-Code:
<?php
echo"
<link type=''text/css' href='jquery-ui-1.8.17.custom.css' rel='Stylesheet' />    
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.17.custom.min.js'></script>
<style>";
      foreach ($TicketArray as $ticket)
      {         
         echo"
         #".$ticket." { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }";
      }
      echo"
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;}
   #droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;}
    </style>
    <script>
    $(function() {";
      foreach ($TicketArray as $ticket)
      {
      echo"
        $( '#".$ticket."' ).draggable({revert: 'invalid'});";
      }
      echo"
        $( '#droppable' ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .addClass( 'ui-state-highlight' )
                    .find( 'p' )
                        .html( 'Dropped!' );
            }
        });
      $( '#droppable2' ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .addClass( 'ui-state-highlight' );
             window.location.href = 'Interface.php';
            }
        });
    });
 </script>";
?>
und noch die layout.css
PHP-Code:
#div-ticketbox
{
   height:300px;
   width:300px;
   position:relative;
   top: 230px;
   left: 50px;   
   overflow-y:auto;
}
#div-Droparea
{
   height:400px;
   overflow:auto;
   padding: 0;
   border: 1px solid #ffffff;
   margin: 5px;
   position:absolute;
   top: 230px;
   left: 350px;
} 
Das ganze funktioniert soweit ganz gut...Allerdings komm ich durch overflow nicht mehr aus der Sektion mit den Draggable Elementen. Sobald ich die zeile Overflow in der CSS wieder lösche klappt es wieder.
Gibt es da eine Möglichkeit, die Elemente aus der Sektion ziehbar zu machen?

Zur Erklärung: Die Draggable Tickets, sollen eine eigene Sektion haben, in welcher man runter scrollen kann. Da es möglicherweise sehr viele Tickets gibt.

Am schönsten würde es aussehen, wenn immer zwei Tickets nebeneinander sind, daher auch die If-Anweisung mit dem <tr>. Klappt auch nicht, wird alles untereinander gesetzt.


Schonmal danke und freundliche Grüße

Sebastian
Moewe ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 24.01.2012, 13:48  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard
Zitat:
Allerdings komm ich durch overflow nicht mehr aus der Sektion mit den Draggable Elementen.
Sorry, aber was kommt nicht mehr aus der Sektion? Was genau geht nicht mehr?

Toll wär ein klickbares Beispiel oder auch einfach nur der HTML-Code, der am Ende bei rauskommt. Besonders toll wäre es, wenn du auf http://jsfiddle.net ein Beispiel zusammenschusterst.

Die Weiterleitung ondrop ist beabsichtigt?

Zitat:
PHP-Code:
foreach ($TicketArray as $ticket) 
      { 
      echo" 
        $( '#".$ticket."' ).draggable({revert: 'invalid'});"; 
      } 
Verwende hier stattdessen einen Klassenbezeichner, sparst dir das foreach und holst performance raus.

Auch das CSS solltest du ausgliedern, dafür brauchste auch kein foreach. Um die elemente nebeneinander anzuordnen, positionier sie absolut zur ticketbox, verwende keine tabelle. Gib jedem 2. eine extra-css-Klasse und mit dieser positioniert du dann die Elemente rechts ausgerichtet (teilbar durch 2 => Modulo-Operator). top/y kannst du als inline-style angeben.

Grüße


Basti
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 24.01.2012, 14:29  
Benutzer
 
Registriert seit: 06.10.2011
Beiträge: 79
PHP-Kenntnisse:
Anfänger
Moewe ist in Verruf geraten
Standard
Als dsa jsfiddle.net klappt gar nicht...das einbinden von JQuer will nicht.

Was ich anbieten kann ist das.

So sieht es aus


Die Tickets möchte ich per Drag and Drop in die rechten Kästen ziehen.
Solange ich aus der CSS den overflow weg lasse, funktioniert das wunderbar.
Ist Overflow drin passiert das:

Ich komm sozusagen nicht aus dieser Boxraus. Ich kann es innerhab unendlich weit nach rechts ziehen.
Lass ich die Maustaste über den Kästen los, ist es immer noch so als wenn ich das Ticket dort ablege.
Ist mir aber nicht sauber gelöst, sieht auch komisch aus.


Ich hoffe das hilft ein wenig
Moewe ist offline   Mit Zitat antworten
Alt 24.01.2012, 14:33  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard
Uff, ich müsste mir jetzt auch angucken, was genau jqueryUI bei der Positionierung alles anstellt. Auf jeden Fall würde ich zuallerst die Tabelle wegnehmen. Ohne HTML / ausprobierbares Bsp. ists schwer, was genaueres zu sagen. Poste doch einfach, was rauskommt, auf jsfiddle. Das Einbinden kann ich auch schnell erledigen.
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 24.01.2012, 15:16  
Benutzer
 
Registriert seit: 06.10.2011
Beiträge: 79
PHP-Kenntnisse:
Anfänger
Moewe ist in Verruf geraten
Standard
lass gut sein^^. Ich werd das ohne Scrollbalken realisieren. Das fiddle ding willl absolut nicht und bevor du da noch anpassen muss, also auch code ist der Aufwand dafür zu groß^^

Was ich noch sagen kann, das hier kommt im Browser an:
HTML-Code:
<link type=''text/css' href='layout.css' rel='Stylesheet' />
<script type='text/javascript'>

   function test()
   {
      Fenster = window.open("info.html", "Zweitfenster1", "width=300,height=200");
   }

</script>

<link type=''text/css' href='jquery-ui-1.8.17.custom.css' rel='Stylesheet' />	
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.17.custom.min.js'></script>
<style>
         #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; z-index: 2; }
         #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; z-index: 2; }
         #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; z-index: 2; }
         #draggable4 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; z-index: 2; }
         #draggable5 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; z-index: 2; }
         #draggable6 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; z-index: 2; }
         #draggable7 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; z-index: 2; }
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;}
   #droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;}
	</style>
	<script>
	$(function() {
		$( '#draggable' ).draggable({revert: 'invalid'});
		$( '#draggable2' ).draggable({revert: 'invalid'});
		$( '#draggable3' ).draggable({revert: 'invalid'});
		$( '#draggable4' ).draggable({revert: 'invalid'});
		$( '#draggable5' ).draggable({revert: 'invalid'});
		$( '#draggable6' ).draggable({revert: 'invalid'});
		$( '#draggable7' ).draggable({revert: 'invalid'});
		$( '#droppable' ).droppable({
			drop: function( event, ui ) {
				$( this )
					.addClass( 'ui-state-highlight' )
					.find( 'p' )
						.html( 'Dropped!' );
			}
		});
      $( '#droppable2' ).droppable({
			drop: function( event, ui ) {
				$( this )
					.addClass( 'ui-state-highlight' );
             window.location.href = 'Interface.php';
			}
		});
	});
 </script>
<div id='div-ticketbox'>
<table Border='0' id='test'>
      <tr>

      <td>
      <div id='draggable' class='ui-widget-content' ondblclick='test()'>
      <p>Kunde 1<br>
      <img src='ticket_preview.jpg' height='50px' width='100px'><br>
      <select name='test'><option>Aktiv</option><option>Inaktiv</option></select></p>
      </div>
      </td>

      </tr>
      <td>
      <div id='draggable2' class='ui-widget-content' ondblclick='test()'>
      <p>Kunde 2<br>
      <img src='ticket_preview.jpg' height='50px' width='100px'><br>
      <select name='test'><option>Aktiv</option><option>Inaktiv</option></select></p>
      </div>

      </td>
      <tr>
      <td>
      <div id='draggable3' class='ui-widget-content' ondblclick='test()'>
      <p>Kunde 3<br>
      <img src='ticket_preview.jpg' height='50px' width='100px'><br>
      <select name='test'><option>Aktiv</option><option>Inaktiv</option></select></p>

      </div>
      </td>
      </tr>
      <td>
      <div id='draggable4' class='ui-widget-content' ondblclick='test()'>
      <p>Kunde 4<br>
      <img src='ticket_preview.jpg' height='50px' width='100px'><br>
      <select name='test'><option>Aktiv</option><option>Inaktiv</option></select></p>

      </div>
      </td>
      <tr>
      <td>
      <div id='draggable5' class='ui-widget-content' ondblclick='test()'>
      <p>Kunde 5<br>
      <img src='ticket_preview.jpg' height='50px' width='100px'><br>
      <select name='test'><option>Aktiv</option><option>Inaktiv</option></select></p>

      </div>
      </td>
      </tr>
      <td>
      <div id='draggable6' class='ui-widget-content' ondblclick='test()'>
      <p>Kunde 6<br>
      <img src='ticket_preview.jpg' height='50px' width='100px'><br>
      <select name='test'><option>Aktiv</option><option>Inaktiv</option></select></p>

      </div>
      </td>
      <tr>
      <td>
      <div id='draggable7' class='ui-widget-content' ondblclick='test()'>
      <p>Kunde 7<br>
      <img src='ticket_preview.jpg' height='50px' width='100px'><br>
      <select name='test'><option>Aktiv</option><option>Inaktiv</option></select></p>

      </div>
      </td>
      </tr>
</table>
</div>
<div id='div-Droparea'>
   <div id='droppable' class='ui-widget-header'>
      <p>Drop here</p>
   </div>
   <div id='droppable2' class='ui-widget-header'>

      <p>Drop here</p>
   </div>
</div>
Moewe ist offline   Mit Zitat antworten
Alt 24.01.2012, 19:34  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard
Fang das Quadrat:

http://jsfiddle.net/fKUj9/

damit solltest du den Rest hinbekommen.

Damit das Posting nicht sinnlos wird, wenn der jsfiddle link ausläuft, hier noch der code:

js:

PHP-Code:
$(function () {
    $('.ticket')
        .draggable({revert: 'invalid'})
        .filter(":nth-child(even)")
        .addClass('right');
    $('#dropzone').droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
        }
    });
}) 
html:

Code:
<div id="tickets">
    <div class="ticket" style="top: 0;">
        <p>i am a fancy draggable ticket</p>
    </div>
    <div class="ticket" style="top: 0;">
        <p>i am a fancy draggable ticket</p>
    </div>
    <div class="ticket" style="top: 60px;">
        <p>i am a fancy draggable ticket</p>
    </div>
    <div class="ticket" style="top: 60px;">
        <p>i am a fancy draggable ticket</p>
    </div>
</div>
<marquee>
    <div id="dropzone" class="ui-header"><p>catch me, if you can</p></div>
</marquee>
css:

PHP-Code:
#tickets {
    position: relative;
    width: 300px;
    height: 130px;
}
#dropzone {
    width: 230px; height: 230px; background: lightblue;
    padding: 10px;
}
.ticket {
    width: 100px; height: 50px; padding: 0.5em;
    position:absolute;
    left: 0;
    background: #d0d0d0;
    color:#dfdfe8;
    border: 2px solid #000;
}
#tickets .right {
    left: 120px ;
} 
Die Farben sind schrecklich, allerdings weigere ich mich, heut nochmal den editor aufzumachen


Grüße
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 25.01.2012, 13:32  
Benutzer
 
Registriert seit: 06.10.2011
Beiträge: 79
PHP-Kenntnisse:
Anfänger
Moewe ist in Verruf geraten
Standard
Sieht echt super aus, danke
Moewe ist offline   Mit Zitat antworten
Antwort

« Jquery slidebox | [Erledigt] Verschwindende Meldung »

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQueryLog new extension for debugging jquery (feedback request) jquerylog JavaScript, Ajax und mehr 8 26.12.2011 11:58
JQuery Ajax PHP Aktualisierung thiagojonas PHP Einsteiger 3 25.10.2011 23:22
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen K00S JavaScript, Ajax und mehr 6 10.09.2011 13:54
Einsatz von Milestones (jQuery) dreamcatcher JavaScript, Ajax und mehr 4 28.06.2011 12:07
PHP und jquery mehlwurm PHP Einsteiger 13 30.05.2011 23:09
[Erledigt] jQuery draggable und click problem BlackScorp JavaScript, Ajax und mehr 5 09.02.2011 15:04
Einfaches JQuery resize und scoll läuft nicht smilla JavaScript, Ajax und mehr 5 08.02.2011 20:44
jQuery, einem DOM-Knoten eine Payload anhängen Chriz JavaScript, Ajax und mehr 6 22.12.2010 15:31
jQuery - Text an Cursorposition einfügen Koala JavaScript, Ajax und mehr 5 11.11.2010 21:28
[Erledigt] Statistik mit jQuery DJ_RhoxxZ JavaScript, Ajax und mehr 6 25.07.2010 17:47
jquery: dialogbox funktioniert nicht Dreamwatcher JavaScript, Ajax und mehr 16 22.07.2010 18:22
[Erledigt] jQuery draggable im kleineren Parent BlackScorp JavaScript, Ajax und mehr 0 28.06.2010 13:13
[Erledigt] jQuery: eigensinniges Drag'n'Drop Curanai JavaScript, Ajax und mehr 3 04.01.2010 02:31
[Erledigt] jQuery Dateien nachladen Phoscur JavaScript, Ajax und mehr 7 14.03.2009 13:44
jQuery Plugin - so richtig? stayInside JavaScript, Ajax und mehr 5 23.02.2009 12:34

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
jquery draggable, jquery div ziehen, jquery ui droppable div, jquery drag position area, jquery draggable aus fenster ziehen, jquery draggable $(this) id, javascript drag and drop table highlight, scriptacolous clonenode, draggable width heigth, ziehbare ebene css, jquery draggable z index, jquery tr draggable, div von einem div in anderes div drag and drop jquery, jquery draggable script, select style with jquery 1.7, jquery eigener cursor, jquery drag and drop float, drag and drop overflow, jquery draggable overflow, css ticketbox

Alle Zeitangaben in WEZ +2. Es ist jetzt 12:06 Uhr.

php.de - Das deutsche PHP-Forum - Kontakt - Impressum - Forenregeln - Archiv - Nach oben



Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum