I have a table with left and right col. Inside the cols, some small tables (as elements) from PHP loop.
I would like to make possible to drag and drop the elements from left to right cols AND also change the sort inside the col itself. Very hard for me !
Here's my code :
HTML part (left col but the right one is the same)
<style>
.deplace{
cursor:move;
}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
<td id="leftMenu" valign="top" style="width:180px;height:800px;border:1px solid black">
<?php
while($rowg = mysql_fetch_assoc($sqlg)){
echo '<table width="100%" cellpadding="5" cellspacing="2"
style="background-color:#CCC;border: 1px solid black;height:100px"
class="deplace" id="left_'.$rowg['id'].'" modulename="'.modif_nom($rowg['module']).'" sourceid="'.$rowg['id'].'">
echo '<tr><td" align="center" style="width:100%">'.$rowg['module'].'</td></tr>';
echo '</table>';
}
?>
</td></tr></table>
And the JS code :
<script language="javascript" type="text/javascript">
$(document).ready(function() { //
$('#leftMenu').Sortable({
//revert: true,
accept: 'deplace',
axis : 'vertically',
onchange: function(event, ui) {
serial = $.SortSerialize('leftMenu');
$.ajax ( {
url : "xhr.php?source=leftMenu",
type : "get",
data : serial.hash,
success: function(data){alert(data);}
});
}
});
$('#rightMenu').Sortable({
//revert: true,
accept: 'deplace',
axis : 'vertically',
onchange: function(event, ui) {
serial = $.SortSerialize('rightMenu');
$.ajax ( {
url : "xhr.php?source=rightMenu",
type : "get",
data : serial.hash,
success: function(data){alert(data);}
});
}
});
//only the functions to move the tables from left to right
$('#rightMenu').draggable({
revert:false,
helper:'original',
});
$('#leftMenu').droppable({
over:function(event, ui){
alert('dropped');
}
});
});
</script>
So, like that, it seems there's a conflict between the functions. If I only let the sortable functions, it's OK but I can't do anything in the receiver col and I would like to send a request to PHP to update a mysql table.
Thanks a lot for your help !
There are a few issues with your code:
Sortable is lower-case
SortSerialize does not exist, I think you mean sortable("serialize")
$('#rightMenu').draggable should be changed to $('#rightMenu').children().draggable because you want to drag the elements inside the menu
Have a look at the jQuery UI Sortable doc too.
Related
I have a table and need to drag/drop cells containing data into blank cells. I'm able to drag and drop fine, but once a cell is dragged away, I need its "old" position to now become a droppable cell. Since the cell is dragged, I need something else to reference. I ended up wrapping each of the td elements in a div element, but all references return "undefined" on the inner cellDiv id (or return the outer tableDiv id). On the fiddle, I notice that the blue background is not appearing so I don't think the 'cellDiv' is doing much.
Next I am going to try swapping the td and cellDiv elements, but I decided to post the question first, as I've searched everywhere and cannot seem to find this specific problem addressed. Thanks for your help.
here is the problem in a jsfiddle: http://jsfiddle.net/tgsz34hx/3/
And the code:
<div id='tableDiv'>
<table>
<tr id='row1'>
<div class='cellDiv' id='r1c1'>
<td class='drop' id='col1'>Drop Here</td></div>
<div class='cellDiv' id='r1c2'>
<td class='nodrop' id='col2'>Drag Me</td></div>
</tr>
</table>
</div>
$(document).ready(function () {
var fromDiv;
$('.nodrop').draggable({
cursor: "move",
appendTo: "body",
revert: "invalid",
start: function (event, ui) {
var thisDiv = $(this).attr('id');
fromDiv = $(this).closest('.cellDiv').attr('id');
alert("thisDiv=" + thisDiv + ", fromDiv=" + fromDiv);
}
});
$('.drop').droppable({
accept: ".nodrop",
tolerance: "pointer",
snap: ".drop",
drop: function (event, ui) {
var parenttd = $(ui.draggable).closest('td').attr('id');
var parentdiv = $(ui.draggable).closest('.cellDiv').attr('id');
// alert("parenttd=" + parenttd + ", parentdiv=" + parentdiv);
$(this).removeClass('drop');
$(this).addClass('nodrop');
$(this).droppable('option', 'disabled', true);
}
});
});
#tableDiv {
background-color: grey;
}
#tableDiv td {
background-color: red;
}
#tableDiv div {
background-color: blue;
}
I have a page with a draggable element which I want to drop into a droppable section of the page. However, when I click on the draggable div I actually want to spawn a clone and drag that into the droppable environment instead (leaving the original behind). In essence I'm trying to create a series of prefabs in a left hand tool-box. When I click on them to drag them into the drawing I just want to spawn a clone of that type of div. is this possible in JavaScript?
Yes it is possible.. Here is an example
HTML
<div class="draggable" style="position:absolute;">
<p>Draggable</p>
</div>
<br />
<br />
<div id="droppable">
<p>Drop here</p>
</div>
CSS
.draggable {
width:65px;
border: 1px solid blue;
}
#droppable {
border:1px solid green;
width:300px;
height:100px;
}
jQuery/Javascript
var dropped = false;
$( ".draggable" ).draggable();
$( "body" ).on( ".draggable dragstart",
function( event, ui ) {
dropped = false;
console.log('1');
ui.helper.before(ui.helper.clone().draggable());
}
);
$( "body" ).on( ".drggable dragstop",
function( event, ui ) {
if(dropped)
ui.helper.draggable('destroy');
else
ui.helper.remove();
}
);
$('#droppable').droppable({
accept: '.draggable',
drop: function(event, ui ) {
dropped = true;
}
});
Example
Fiddle
I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?
The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.
That said, you can override the internal _renderItem to directly append results to a completely different element, for example:
HTML
<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>
JavaScript
$('input').autocomplete({
search: function(event, ui) {
$('.test ul').empty();
},
source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li/>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.test ul'));
};
I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.
<div class="test">Output goes here:<br/></div>
<script>
$("input#autocomplete").autocomplete({
source: ["something", "something-else"],
appendTo: ".text",
position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
});
</script>
I needed more control over where to put the data, so this is how I went about it:
$("#input").autocomplete({
minLength: 3,
source: [
"ActionScript",
"AppleScript",
"Asp"
],
response: function(event, ui) {
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui) {
// close the widget
$(this).autocomplete('close');
}
});
hle's answer worked awesome for me and gives you more flexibility! Here is my test code that was modified by his answer:
$("#autocomplete").autocomplete({
minLength: 3,
source: ["something", "something-else"],
response: function(event, ui)
{
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui)
{
// close the widget
$(this).autocomplete('close');
}
});
Although this question is pretty old but i got a pretty easy solution. No hack, nothing just in jQuery way:
Instead of autocomplete response function, just add response data in div on success
$(document).ready(function () {
$("#book-code-search").autocomplete({
minLength: 2,
delay: 500,
source: function (request, response) {
$.ajax( {
url: "server side path that returns json data",
data: { searchText: request.term, param2 : $("#type").val()},
type: "POST",
dataType: "json",
success: function( data ) {
$("#data-success").html(data.returnedData); //returnedData is json data return from server side response
/* response($.map(data, function (item) {
return {
label: item.FullDesc,
value: item.FullDesc
}
})) */
}
});
}
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>
I'm building a site which allows users to create an html page which can then be saved and shared on another site. I want them to be able to resize and drag the page elements. I can do this using jQuery, but I'm not sure how I then save that so that when the page is viewed elsewhere, it looks the same.
I haven't decided yet how to store the page info, but what I'm thinking is that I can store each element in the database along with its absolute position, and its contents. Does that sound like a good plan?
If so, how do I get the position for the div to pass to the php so that it can be saved?
Thanks.
JQueryUI Resizable has an event called resize that you can use:
var resposition = '';
$('#divresize').resizable({
//options...
resize: function(event,ui){
resposition = ui.position;
}
});
The same occurs with JQueryUI Draggable and its event drag:
var dragposition = '';
$('#divdrag').draggable({
// other options...
drag: function(event,ui){
dragposition = ui.position;
}
});
resposition and dragposition is going to be arrays. You can see it working here: http://jsbin.com/uvuzi5
EDIT: using a form, you can save dragposition and resposition into hidden inputs
var inputres = '<input type="hidden" id="resposition" value="'+resposition.left+','+resposition.top+'"/>'
$('#myform').append(inputres);
var inputdrag = '<input type="hidden" id="dragposition" value="'+dragposition.left+','+dragposition.top+'"/>'
$('#myform').append(inputdrag);
And in your PHP file to handle the form:
$dragposition = $_GET['dragposition'];
$resposition = $_GET['resposition'];
$dragposition = explode(',',$dragposition);
$resposition = explode(',',$resposition);
Finally, both variables should be arrays with top and left attributes:
$dragposition => [top,left] attributes from draggable
$resposition => [top,left] attributes from resizable
you have to save position at some where so that you can get position
details when next time you open page.
option 1: you can store html elements position details in "localStorage" its default browser storage.
Example: Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/css/jquery-ui.min.css">
<script src="dist/js/jquery-ui.min.js"></script>
</head>
<body>
<script>
var positions = JSON.parse(localStorage.positions || "{}");
$(function() {
var d = $("[id=draggable]").attr("id", function(i) {
return "draggable_" + i
})
$.each(positions, function(id, pos) {
$("#" + id).css(pos)
})
d.draggable({
containment: "#wrapper",
scroll: false,
stop: function(event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
});
</script>
<div id="wrapper">
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div1</div>
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div2</div>
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div3</div>
</div>
</body>
</html>
option 2: you can store html elements position details in "your database"
I have a list like so:
<ol id="page_items">
<li>
<label for="page_body_1">Content Area 1</label>
<textarea name="page_body_1" class="page_content_area" rows="10"></textarea>
</li>
<li>
<label for="page_body_2">Content Area 2</label>
<textarea name="page_body_2" class="page_content_area" rows="10"></textarea>
</li>
</ol>
When the page loads, #page_items turns into a tinyMCE editor. What I want is for the element that defines whether or not the li elements are being sorted to be the <label> but no other child elements of li. So the only element that starts the sort is the label.
Here's my jQuery:
$(document).ready(function(){
$("#page_items").sortable({
activate: function(event, ui) {
var EditorID = ui.item.find('textarea').attr('id');
if ( EditorID ){
tinyMCE.execCommand("mceRemoveControl", false, EditorID);
$('#'+EditorID).hide();
}
},
stop: function(event, ui) {
var EditorID = ui.item.find('textarea').attr('id');
if ( EditorID ){
$('#'+EditorID).show();
tinyMCE.execCommand("mceAddControl", false, EditorID);
delete EditorID;
}
}
});
});
In case anyone is wondering, I'm disabling the tinyMCE because in FireFox, moving an iFrame around the DOM clears it's contents and doesn't allow focus back on it.
Is there a way to cancel the sortable if the element clicked isn't the label?
If anyone has any code clean-up suggestions they are also welcome!
Thanks.
This turned out to be a sortable option that I didn't see before (I looked... oh I looked). The handle option is what I need. This initializes a sortable with the handle option specified.
Simply...
$(document).ready(function(){
$("#page_items").sortable({
handle: 'label'
});
});