Droppable Jquery met Query

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jerry php

Jerry php

09/07/2013 22:33:40
Quote Anchor link
Beste mensen,

op deze link: http://www.ikprint.nl/test.php
zien jullie een droppable systeem met Jquery. Deze wil ik nu gaan voorzien van een systeem dat de gekozen items ophaalt en bij bevestiging in een query zet, of naar een php bestandje stuurt of iets dergelijks. Ligt eraan wat mogelijk is.

Hoe kan ik dit eventueel doen?

Dit is mijn code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  h1 { padding: .2em; margin: 0; }
  #products { float:left; width: 500px; margin-right: 2em; }
  #cart { width: 200px; float: left; margin-top: 1em; }
  /* style the list to maximize the droppable hitarea */
  #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  </style>
  <script>
  $(function() {
    $( "#catalog" ).accordion();
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#cart ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        // gets added unintentionally by droppable interacting with sortable
        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });
  </script>
</head>
<body>
 
<div id="products">
  <h1 class="ui-widget-header">Products</h1>
  <div id="catalog">
    <h2><a href="#">T-Shirts</a></h2>
    <div>
      <ul>
        <li>Lolcat Shirt</li>
        <li>Cheezeburger Shirt</li>
        <li>Buckit Shirt</li>
      </ul>
    </div>
    <h2><a href="#">Bags</a></h2>
    <div>
      <ul>
        <li>Zebra Striped</li>
        <li>Black Leather</li>
        <li>Alligator Leather</li>
      </ul>
    </div>
    <h2><a href="#">Gadgets</a></h2>
    <div>
      <ul>
        <li>iPhone</li>
        <li>iPod</li>
        <li>iPad</li>
      </ul>
    </div>
  </div>
</div>
 
<div id="cart">
  <h1 class="ui-widget-header">Shopping Cart</h1>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add your items here</li>
    </ol>
  </div>
</div>
 
 
</body>
</html>
 
PHP hulp

PHP hulp

26/11/2020 21:23:41
 
Wouter J

Wouter J

09/07/2013 22:59:49
Quote Anchor link
Met AJAX PHP file aanroepen. Als je een element dropt sla je die op in een globale variabele en die geef je mee bij met AJAX.

Voor het ophalen van het gedropte item: http://stackoverflow.com/a/2975132/1149495
 
- Ariën -
Beheerder

- Ariën -

09/07/2013 22:59:53
Quote Anchor link
Ik zeg: $.ajax()
 
Jerry php

Jerry php

10/07/2013 20:03:36
Quote Anchor link
Beste Wouter,

hoe zou ik die code het beste kunnen toepassen, als je kijkt naar mijn code hierboven in het topic? Ik weet namelijk niet precies hoe ik moet beginnen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.