Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Check whether the mousedown event belonged to a valid drop target before preventing default #1778

Merged
merged 1 commit into from
May 8, 2014
Merged

Check whether the mousedown event belonged to a valid drop target before preventing default #1778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/dd/docs/assets/panel-drag-tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
YUI.add('panel-drag-tests', function(Y) {
var Assert = Y.Assert,
suite = new Y.Test.Suite('drag-plugin');

suite.add(new Y.Test.Case({
name: 'drag-plugin',
'is example rendered and dd attached': function() {
var el = Y.one('.example .yui3-panel');
Assert.isTrue(el.hasClass('yui3-dd-draggable'), 'Element does not have DD attached');
}
}));

Y.Test.Runner.add(suite);

}, '', { requires: ['node-event-simulate' ] });
11 changes: 9 additions & 2 deletions src/dd/docs/component.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,13 @@
"modules" : ["dd"],
"tags" : ["dd", "groups", "grouping"]
},
{
"name" : "panel-drag",
"displayName": "Drag - Handles on an Panel",
"description": "Using drag handles on a Panel, this example demonstrates how to use drag handles to allow dragging of a Panel with content by the Panel title area.",
"modules" : ["dd"],
"tags" : ["dd", "plugin", "node", "groups", "grouping", "overlay", "panel"]
},
{
"name" : "shim-drag",
"displayName": "Using the Drag Shim",
Expand Down Expand Up @@ -112,7 +119,7 @@
"displayName": "Photo Browser",
"newWindow" : "true",
"description": "Example Photo Browser application.",
"modules" : ["dd", "animation", "event", "slider", "node", "stylesheet", "yql"],
"modules" : ["dd", "animation", "event", "slider", "node", "stylesheet", "yql"],
"tags" : ["dd", "delegation", "animation", "target", "application", "photos", "yql"]
},
{
Expand All @@ -121,7 +128,7 @@
"newWindow" : "true",
"displayName": "Portal Style Example",
"description": "Portal style example using Drag & Drop Event Bubbling and Animation.",
"modules" : ["dd", "animation", "event", "node", "yql", "json"],
"modules" : ["dd", "animation", "event", "node", "yql", "json"],
"tags" : ["dd", "bubbling", "animation", "target", "application", "portal", "yql"]
}
],
Expand Down
187 changes: 187 additions & 0 deletions src/dd/docs/panel-drag.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
<div class="intro">
<p>This example shows a YUI Panel which an be dragged by it's header area.</p>
</div>

<div class="example">
{{>overlay-drag-source}}
</div>

<h3>Setting up the Node</h3>
<p>First we need the form to make draggable.</p>
```
<div class="yui3-skin-sam">
<div id="demo">
<div class="yui3-widget-hd">An example Draggable Panel</div>
<div class="yui3-widget-bd">
<form id="example-form" action="?">
<fieldset>
<legend>This Panel can be moved by dragging it's title area. It contains an example form for you to complete.</legend>
<div class="formfield">
<label for="input-name">Name</label>
<input type="text" name="name" id="input-name" placeholder="Name">
</div>
<div class="formfield">
<label for="input-email">Email</label>
<input type="email" name="email" id="input-email" placeholder="Email">
</div>
<div class="formfield">
<label for="input-password">Password</label>
<input type="password" name="password" id="input-password" placeholder="Password">
</div>
<div class="controls">
<button class='primary'>Submit</button>
</div>
</fieldset>
</form>
</div>
<div class="yui3-widget-ft"></div>
</div>
</div>
```

<p>Now we give that Node some CSS to make it visible and style it appropriately.</p>

```
.yui3-widget-hd {
cursor: move
}

.yui3-widget-ft {
display: none;
}

.yui3-skin-sam .yui3-panel-content {
border: #ccc;
border-radius: 4px;
}

#example-form,
#example-form input {
font-family: "proxima-nova", sans-serif;
color: #777;
}

#example-form fieldset {
border: 0;
margin: 0;
padding: .35em 0 .75em;
}

#example-form legend {
display: block;
width: 100%;
padding: .3em 0;
color: #333;
border-bottom: 1px solid #e5e5e5;
margin: 1em 0;
}

#example-form label {
display: inline-block;
width: 10em;
margin: 0 1em 0 0;
text-align: right;
vertical-align: middle;
}

#example-form .controls {
margin: 1.5em 0 0 10em;
}

#example-form input {
width: 15em;
padding: .5em .6em;
display: inline-block;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: .25em 0;
font-size: 100%;
}

#example-form button {
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: inherit;
font-size: 100%;
padding: .5em 1em;
color: #444;
color: rgba(0,0,0,.8);
border: 1px solid #999;
border: 0 rgba(0,0,0,0);
background-color: #E6E6E6;
text-decoration: none;
border-radius: 2px;
}

#example-form button.hover,
#example-form button:hover,
#example-form button:focus {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',
endColorstr='#1a000000', GradientType=0);
background-image: -webkit-gradient(linear,0 0,0
100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,.05)
40%,rgba(0,0,0,.1));
background-image: -moz-linear-gradient(top,rgba(0,0,0,.05)
0,rgba(0,0,0,.1));
background-image: -o-linear-gradient(transparent,rgba(0,0,0,.05)
40%,rgba(0,0,0,.1));
background-image: linear-gradient(transparent,rgba(0,0,0,.05)
40%,rgba(0,0,0,.1));
}

#example-form button.primary {
background-color: #0078e7;
color: #fff;
}
```

<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the `panel` and `dd-plugin` modules.</p>

```
YUI().use('panel', 'dd-plugin');
```


<h3>Creating the Panel and making it draggable</h3>
<p>Now that we have a YUI instance with the `panel` module, we can set up the Panel to contain the form.</p>

```
YUI().use('panel', 'dd-plugin', function(Y) {
var panel = new Y.Panel({
srcNode: '#demo',
render: true,
centered: true,
width: '400px'
});
});
```


<h3>Making the Panel draggable</h3>
<p>And then Plug the header with the Drag plugin</p>

```
// Make the panel draggable.
panel.plug(Y.Plugin.Drag, {
handles: [
'.yui3-widget-hd'
]
});
```
160 changes: 160 additions & 0 deletions src/dd/docs/partials/overlay-drag-source.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<style>
.yui3-widget-hd {
cursor: move
}

.yui3-widget-ft {
display: none;
}

.yui3-skin-sam .yui3-panel-content {
border: #ccc;
border-radius: 4px;
}

#example-form,
#example-form input {
font-family: "proxima-nova", sans-serif;
color: #777;
}

#example-form fieldset {
border: 0;
margin: 0;
padding: .35em 0 .75em;
}

#example-form legend {
display: block;
width: 100%;
padding: .3em 0;
color: #333;
border-bottom: 1px solid #e5e5e5;
margin: 1em 0;
}

#example-form label {
display: inline-block;
width: 10em;
margin: 0 1em 0 0;
text-align: right;
vertical-align: middle;
}

#example-form .controls {
margin: 1.5em 0 0 10em;
}

#example-form input {
width: 15em;
padding: .5em .6em;
display: inline-block;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: .25em 0;
font-size: 100%;
}

#example-form button {
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: inherit;
font-size: 100%;
padding: .5em 1em;
color: #444;
color: rgba(0,0,0,.8);
border: 1px solid #999;
border: 0 rgba(0,0,0,0);
background-color: #E6E6E6;
text-decoration: none;
border-radius: 2px;
}

#example-form button.hover,
#example-form button:hover,
#example-form button:focus {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',
endColorstr='#1a000000', GradientType=0);
background-image: -webkit-gradient(linear,0 0,0
100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,.05)
40%,rgba(0,0,0,.1));
background-image: -moz-linear-gradient(top,rgba(0,0,0,.05)
0,rgba(0,0,0,.1));
background-image: -o-linear-gradient(transparent,rgba(0,0,0,.05)
40%,rgba(0,0,0,.1));
background-image: linear-gradient(transparent,rgba(0,0,0,.05)
40%,rgba(0,0,0,.1));
}

#example-form button.primary {
background-color: #0078e7;
color: #fff;
}


</style>

<div class="yui3-skin-sam">
<div id="demo">
<div class="yui3-widget-hd">An example Draggable Panel</div>
<div class="yui3-widget-bd">
<form id="example-form" action="?">
<fieldset>
<legend>This Panel can be moved by dragging it's title area. It contains an example form for you to complete.</legend>
<div class="formfield">
<label for="input-name">Name</label>
<input type="text" name="name" id="input-name" placeholder="Name">
</div>
<div class="formfield">
<label for="input-email">Email</label>
<input type="email" name="email" id="input-email" placeholder="Email">
</div>
<div class="formfield">
<label for="input-password">Password</label>
<input type="password" name="password" id="input-password" placeholder="Password">
</div>
<div class="controls">
<button class='primary'>Submit</button>
</div>
</fieldset>
</form>
</div>
<div class="yui3-widget-ft"></div>
</div>
</div>

<script>

YUI().use('panel', 'dd-plugin', function(Y) {
var panel = new Y.Panel({
srcNode: '#demo',
render: true,
centered: true,
width: '400px'
});

// Make the panel draggable.
panel.plug(Y.Plugin.Drag, {
handles: [
'.yui3-widget-hd'
]
});
});
</script>

Loading