jquery-ui/tests/visual/compound/draggable_resizable.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Compound Visual Test: Draggable and Resizable block element</title>
	<link rel="stylesheet" href="../visual.css">
	<link rel="stylesheet" href="../../../themes/base/all.css">
	<style>
	.draggable {
		margin: 0.5em;
		padding: 0.5em;
	}
	.absolute {
		color: red;
		position: absolute !important;
	}
	</style>
	<script src="../../../external/requirejs/require.js"></script>
	<script src="../../../demos/bootstrap.js" data-modules="draggable resizable"
		data-composite="true">
		$( ".draggable" )
			.addClass( "ui-widget ui-widget-header ui-corner-all" )
			.draggable({
				revert: "invalid"
			})
			.resizable({
				minHeight: 13,
				handles: "s"
			});
		$( ".draggable" ).last().addClass( "absolute" );
	</script>
</head>
<body>

<p>WHAT: Three draggable and resizable elements, with only a bottom handle. Last one (red color) is absolutely positioned.</p>
<p>EXPECTED: Each element can be dragged and resized. The first two stay with their relative positioning (induced by draggable). The last one can be resized despite the absolute positioning.</p>

<div id="first">
	<div class="draggable">Draggable 1-1</div>
	<div class="draggable">Draggable 1-2</div>
	<div class="draggable">Draggable 1-3</div>
</div>

</body>
</html>
Resizable: Remove bad workaround for draggable+resizable This adds a compound test page for draggable+resizable, which had no coverage before. Using that page shows that there is no way to reproduce the behaviour described in the original ticket that caused this workaround, since its not possible to resize an element beyond the window boundaries. Therefore removing the workaround, which is 6+ years old and has no test coverage, seems like the sanest approach. Fixes #6939 Closes gh-1210 2014-03-11 10:50:12 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
			`<title>Compound Visual Test: Draggable and Resizable block element</title>`
			`<link rel="stylesheet" href="../visual.css">`
			`<link rel="stylesheet" href="../../../themes/base/all.css">`
			`<style>`
			`.draggable {`
			`margin: 0.5em;`
			`padding: 0.5em;`
			`}`
			`.absolute {`
			`color: red;`
			`position: absolute !important;`
			`}`
			`</style>`
Tests: Use demo bootstrap for visual tests Adds a data-composite option and fixes paths for effects. Otherwise just applies the same conversion as already applied to demos, sometimes moving a <style> element to the right place. 2015-09-30 07:49:13 +00:00			`<script src="../../../external/requirejs/require.js"></script>`
			`<script src="../../../demos/bootstrap.js" data-modules="draggable resizable"`
			`data-composite="true">`
Resizable: Remove bad workaround for draggable+resizable This adds a compound test page for draggable+resizable, which had no coverage before. Using that page shows that there is no way to reproduce the behaviour described in the original ticket that caused this workaround, since its not possible to resize an element beyond the window boundaries. Therefore removing the workaround, which is 6+ years old and has no test coverage, seems like the sanest approach. Fixes #6939 Closes gh-1210 2014-03-11 10:50:12 +00:00			`$( ".draggable" )`
			`.addClass( "ui-widget ui-widget-header ui-corner-all" )`
			`.draggable({`
			`revert: "invalid"`
			`})`
			`.resizable({`
			`minHeight: 13,`
			`handles: "s"`
			`});`
All: Remove usage of jQuery positional selectors jQuery positional selectors () have been deprecated in [jQuery 3.4.0](https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/) and they'll be removed in jQuery 4.0.0. This PR removes their usage. Most of the changes were possible without changing public API. However, dropping `:even` usage required a change to the [`header` option](https://api.jqueryui.com/accordion/#option-header) of the accordion widget. I made it an optional function; this will need to be documented. The polyfill for `.even()` & `.odd()` is added for jQuery <3.5.0. There was no usage of the :odd selector in the code but the `.odd()` method is also polyfilled for completeness. Closes gh-1904 2020-01-22 15:44:34 +00:00			`$( ".draggable" ).last().addClass( "absolute" );`
Resizable: Remove bad workaround for draggable+resizable This adds a compound test page for draggable+resizable, which had no coverage before. Using that page shows that there is no way to reproduce the behaviour described in the original ticket that caused this workaround, since its not possible to resize an element beyond the window boundaries. Therefore removing the workaround, which is 6+ years old and has no test coverage, seems like the sanest approach. Fixes #6939 Closes gh-1210 2014-03-11 10:50:12 +00:00			`</script>`
			`</head>`
			`<body>`

			`<p>WHAT: Three draggable and resizable elements, with only a bottom handle. Last one (red color) is absolutely positioned.</p>`
			`<p>EXPECTED: Each element can be dragged and resized. The first two stay with their relative positioning (induced by draggable). The last one can be resized despite the absolute positioning.</p>`

			`<div id="first">`
			`<div class="draggable">Draggable 1-1</div>`
			`<div class="draggable">Draggable 1-2</div>`
			`<div class="draggable">Draggable 1-3</div>`
			`</div>`

			`</body>`
			`</html>`