dzmaker/index.html at master · pci/dzmaker · 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slide Maker</title>
  <!-- Reference the theme's stylesheet on the Google CDN -->
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />

  <!-- Reference jQuery and jQuery UI from the CDN. Remember
       that the order of these two elements is important -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <style>
  	.ui-draggable {
  		border: 2px solid #DDD;
  	}
  </style>
</head>
<body>

<section aria-selected>
	<h1 class="dragresize" contenteditable>This is a test!</h1>
	<div class="dragresize" id='img1' style="width:800px;height:600px;">
</section>
<input type='button' value='Insert Text' id='insertText'/>
<input type='button' value='Drag' id='drag'/>
<input type='button' value='Undrag' id='undrag'/>

<script>
$('#insertText').click(function(){
	$('section[aria-selected]').append('<h1 class="dragresize" style="width:200px;height:200px;" contenteditable>Text</h1>');
});

$('#drag').click(function(){
	$(".dragresize").resizable();
	$(".dragresize").dragit();
});

$('#undrag').click(function(){
	$( ".dragresize" ).resizable("destroy");
});
</script>

<script>
(function( $ ) {
  $.fn.dragit = function() {
    // remember - no need for $(this)
    var delay = 100,
        timer,
        dx, dy;

    this.mousedown(function(e) {
        // don't stop event prop (otherwise contenteditable stops working)
        px = e.pageX - $(this).offset().left;
        py = e.pageY - $(this).offset().top;

        $(this).on('mousemove',function(e){
            $(this).offset({ top: e.pageY-py, left: e.pageX-px});
        });
    });

    this.mouseup(function() {
        $(this).off('mousemove');
    });

  };
})( jQuery );
</script>

<style id="editablestyle">
#img1 {
    background: url('http://placekitten.com/g/800/600');
}
</style>
</body>
</html>