258
правок
Yui: различия между версиями
нет описания правки
Moriline (обсуждение | вклад) Нет описания правки |
Moriline (обсуждение | вклад) Нет описания правки |
||
|
<h3><span>Drag & Drop (функции для Drag & Drop)</span></h3>
'''Перетаскивание и изменение размеров элемента:'''
<source lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js"></script>
<style type="text/css">
#dd-panel {
position: relative;
height: 200px;
width: 150px;
top: 0px;
left: 20px;
border: 1px solid #333333;
background-color: #f7f7f7;
}
#dd-resize-handle {
cursor: se-resize;
position: absolute;
bottom: 0px;
right: 0px;
width: 10px;
height: 10px;
background-color: blue;
font-size: 1px;
}
</style>
<!-- 1 -->
<!-- 2 -->
<div id="dd-panel">
<div id="dd-resize-handle"></div>
</div>
<script type="text/javascript">
YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
YAHOO.example.DDResize.superclass.constructor.apply(this, arguments);
if (handleElId) {
this.setHandleElId(handleElId);
}
};
YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop, {
onMouseDown: function(e) {
var panel = this.getEl();
this.startWidth = panel.offsetWidth;
this.startHeight = panel.offsetHeight;
this.startPos = [YAHOO.util.Event.getPageX(e),
YAHOO.util.Event.getPageY(e)];
},
onDrag: function(e) {
var newPos = [YAHOO.util.Event.getPageX(e),
YAHOO.util.Event.getPageY(e)];
var offsetX = newPos[0] - this.startPos[0];
var offsetY = newPos[1] - this.startPos[1];
var newWidth = Math.max(this.startWidth + offsetX, 10);
var newHeight = Math.max(this.startHeight + offsetY, 10);
var panel = this.getEl();
panel.style.width = newWidth + "px";
panel.style.height = newHeight + "px";
}
});
(function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
dd = new YAHOO.example.DDResize("dd-panel", "dd-resize-handle", "panelresize");
dd2 = new YAHOO.util.DD("dd-panel", "paneldrag");
dd2.addInvalidHandleId("dd-resize-handle");
});
})();
</script>
<!-- 2 -->
</source>
| |||