jquerypp/event/drop/drop.html at master · FullContactCoder/jquerypp · GitHub

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
83
84
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>drop</title>
        <style type='text/css'>
            .handle {
				width: 100px;
				height: 25px;
				border: dashed 1px red;
				cursor : pointer;
			}
            .dropout, .dropmove, .cancel {
                width: 200px;
				height: 50px;
				border: dashed 1px green;
				cursor : pointer;
                background-color: white;
            }
            #dropout {
                padding: 20px;
                border: solid 1px blue;
            }
            .over {
                background-color: yellow;
            }
        </style>
	</head>
	<body>
<div  id='demo-html'>
<h2>Drop Demo</h2>
<div class='handle'>Drag Me</div>
<h2>Dropout/Dropover</h2>
<div id='dropout'>
  <div class='dropout'></div>
  <div class='dropout'></div>
</div>
<a href="javascript://" id='undelegate'>undelegate</a>
<h2>Dropmove/Dropon</h2>
<div class='dropmove'></div>
<span>Drop Count <span class='count'>0</span></span>
</div>
<script type='text/javascript'
        src='../../../steal/steal.js'></script>
<script type='text/javascript' id='demo-source'>
steal('jquery/event/drop', function(){
//make drags
$('.handle').live("draginit", function(){})

//add dropout/dropover
$('#dropout')
  .delegate(".dropout","dropover", function(){
    $(this).addClass('over')
  })
  .delegate(".dropout","dropout", function(){
    $(this).removeClass('over')
  })
  .bind("dropover", function(){
    $(this).addClass('over')
  })
  .bind("dropout", function(){
    $(this).removeClass('over')
  });

//turn off dropout/dropover
$("#undelegate").click(function(){
  $('#dropout').undelegate(".dropout","dropover");
  $('#dropout').undelegate(".dropout","dropout");
})

//add dropmove/dropon
var count = 0
$('.dropmove')
  .bind('dropmove', function(){
    $('.count').text(count++)
  })
  .bind('dropon', function(){
    $(this).text("Dropped on!")
  });

})
</script>
	</body>
</html>