Jquery UI nested Selectable issue
I have requirement of creating/splitting my div elements horizontally and vertically on click of button at run time. I am able to create a div container in which splits the canvas according to the button clicked.
For example: When I click horizontalSplit button it should create two new div's within the selected container. I am running into issue with nested child div element. When I am trying to select the innermost child code is selecting parent div also which is creating issue. I am not able to figure out why my nonSelectable class is automatically getting "ui-selected"
This is what I have done so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="scripts/jquery-1.6.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>
<style>
#canvasWrapper {
border: 1px solid #DDDDDD;
height: 500px;
vertical-align:top;
margin-left: auto;
margin-right: auto;
width: 90%;
}
.Frame {
border: 1px solid #DDDDDD;
height: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.hFrame {
border: 1px solid #DDDDDD;
height: 50%;
width: 100%;
position:relative;
}
.nonSelectable {
border: 1px solid #DDDDDD;
height: 50%;
width: 100%;
position:relative;
}
.vFrame {
border: 1px solid #DDDDDD;
height: 100%;
width: 50%;
position:relative;
}
.buttonBar {
position: relative;
margin-left: auto;
margin-right: auto;开发者_运维问答
width:90%;
}
.Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting { background: blue; }
.Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected { background: grey; }
.hFrame ui-selectable { background: yellow; }
.hFrame ui-selected { background: green; }
.hFrame ui-selectable ui-selected { background: pink; }
</style>
</head>
<body>
<div id="canvasWrapper">
<div id="canvasFrame" class="Frame">
</div>
</div>
<div class="buttonBar">
<input id="B1" class="button" type="submit" value="Horizontal Split">
<input id="B2" class="button" type="submit" value="Vertical Split">
</div>
<script>
$(document).ready(function()
{
$("#canvasFrame").addClass("ui-selected");
$(function() {
$( ".Frame" ).selectable({
// cancel: '.nonSelectable'
});
$( ".hFrame" ).selectable({
// cancel: '.nonSelectable'
});
$( ".vFrame" ).selectable();
// $( ".nonSelectable" ).selectable("disable");
});
addHFrame();
addVFrame();
});
function addHFrame(){
$("#B1").unbind('click.addit').bind('click.addit',function()
{
var numSplits=2;
var select="";
$(".ui-selected ").each(function () {
for (var i=0; i<numSplits ; i++){
$(this).removeClass('ui-selected ui-selectable');
$(this).parent().removeClass('ui-selected ui-selectable');
var $newElement = '<div></div>';
$(this).append($newElement);
$(this).children().addClass("hFrame");
//$(this).unbind('ui-selected ui-selectable');
// $(this).parent().selectable("disable") ;
// $(this).remove("hFrame").addClass("nonSelectable") ;
addHFrame();
}
$(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);
});
});
}
function addVFrame(){
$("#B2").click(function()
{
$("div.ui-selected").each(function () {
// $(this).append('<div class="vFrame"> </div>');
alert("Button Vertical Split Clicked");
});
});
}
</script>
</body>
</html>
Sounds like you need to prevent event propagation: http://api.jquery.com/event.stopPropagation/
Similar question: jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?
When the element is clicked, the event bubbles up the DOM until it hits the highest level HTML node. This is referred to as event propagation. So the event is fired on all of the element's ancestors unless event propagation is halted. This can be done like so:
HTML-
<body>
<div id="container">
<a href="javascript:void(0);" id="click-element"></a>
</div>
</body>
Script-
$('#click-element').click(function(event){
//prevent container and body from triggering click event
event.stopPropagation();
//do stuff
});
I know this doesn't provide a technical solution to your problem but it's an answer that easier than than the solution. Stop using .selectable. .selectable is a helper to provide on-click functionality, at this point it's easier to do what you want without it, than it is to reconfigure. Use on click with a filter and add some event propagation overrides to go back to the selectable style functionality:
$('#canvas').on('click', '.control', function (event) {
var ui = $(this);
$('#canvas .control').removeClass('ui-selected');
ui.addClass('ui-selected');
-- do stuff --
event.stopPropagation();
event.preventDefault();
});
To detect click off:
$('#canvas').on('click', function () {
$('#canvas .control').removeClass('ui-selected');
-- Do Stuff when not selected --
});
This won't fire because of the event.stopPropagation() when selecting a .control.
加载中,请稍侯......
精彩评论