Suggested Videos
Part 92 - jquery draggable widget
Part 93 - Draggable element on top
Part 94 - jquery droppable widget
(追記) (追記ここまで)
In this video we will discuss customizing droppable widget. This is continuation to Part 94. Please watch Part 94 from jQuery tutorial before proceeding.
(追記) (追記ここまで)
The helper option of draggable widget specifies the element that you want to use as a helper while dragging the draggable. This option supports multiple types - string or function.
String: If set to "clone", then the element will be cloned and the clone will be dragged.
Function: A function that will return a DOMElement to use while dragging.
jQuery tutorial for beginners
Part 92 - jquery draggable widget
Part 93 - Draggable element on top
Part 94 - jquery droppable widget
(追記) (追記ここまで)
In this video we will discuss customizing droppable widget. This is continuation to Part 94. Please watch Part 94 from jQuery tutorial before proceeding.
(追記) (追記ここまで)
Option/Event
Description
over
This event is triggered when an acceptable draggable is dragged over the droppable
out
This event is triggered when an acceptable draggable is dragged out of the droppable
activate
This event is triggered when an acceptable draggable starts dragging
deactivate
This event is triggered when an acceptable draggable stops dragging
activeClass
The specified class will be applied to the droppable while an acceptable draggable is being dragged
hoverClass
The specified class will be applied to the droppable while an acceptable draggable is being hovered over the droppable
The helper option of draggable widget specifies the element that you want to use as a helper while dragging the draggable. This option supports multiple types - string or function.
String: If set to "clone", then the element will be cloned and the clone will be dragged.
Function: A function that will return a DOMElement to use while dragging.
<%@PageLanguage="C#"AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"Inherits="Demo.WebForm1"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="jquery-1.11.2.js"></script>
<scriptsrc="jquery-ui.js"></script>
<linkhref="jquery-ui.css"rel="stylesheet"/>
<scripttype="text/javascript">
$(document).ready(function () {
$('#source
li').draggable({
helper: function () {
return'<b><u>' + $(this).text() + '</b></u>';
},
revert: 'invalid'
});
$('#divCountries').droppable({
accept: 'li[data-value="country"]',
//over:
function (event, ui) {
// $(this).addClass('highlight');
//},
//out:
function (event, ui) {
// $(this).removeClass('highlight');
//},
//hoverClass:
'highlight',
//activeClass:
'highlight',
activate: function (event, ui) {
$(this).addClass('highlight');
},
deactivate: function (event, ui) {
$(this).removeClass('highlight');
},
drop: function (event, ui) {
$('#countries').append(ui.draggable);
}
});
$('#divCities').droppable({
accept: 'li[data-value="city"]',
//over:
function (event, ui) {
// $(this).addClass('highlight');
//},
//out:
function (event, ui) {
// $(this).removeClass('highlight');
//},
//hoverClass:
'highlight',
//activeClass:
'highlight',
activate: function (event, ui) {
$(this).addClass('highlight');
},
deactivate: function (event, ui) {
$(this).removeClass('highlight');
},
drop: function (event, ui) {
$('#cities').append(ui.draggable);
}
});
});
</script>
<style>
.divClass {
border: 3pxsolidblack;
font-size: 25px;
background-color: lightgray;
width: 250px;
padding: 5px;
display: inline-table;
}
li {
font-size: 20px;
}
.highlight {
background-color: green;
color: white;
border: 3pxsolidgrey;
}
</style>
</head>
<bodystyle="font-family:
Arial">
<formid="form1"runat="server">
<divclass="divClass">
Countries & Cities
<ulid="source">
<lidata-value="country">USA</li>
<lidata-value="country">India</li>
<lidata-value="country">UK</li>
<lidata-value="city">New York</li>
<lidata-value="city">Chennai</li>
<lidata-value="city">London</li>
</ul>
</div>
<divclass="divClass"id="divCountries">
Countries
<ulid="countries"></ul>
</div>
<divclass="divClass"id="divCities">
Cities
<ulid="cities"></ul>
</div>
</form>
</body>
</html>
jQuery tutorial for beginners
No comments:
Post a Comment
It would be great if you can help share these free resources
[フレーム]