Search jQuery

jQuery Forum

Using jQuery UI

lmcgib10

Combining binding and drag and drop

in Using jQuery UI • 9 years ago

Hi,
I am using jquery-1.9.1 and jqueryui-1.10.3 in my web application.
I have a list of html elements like

<div id="products">
<h1 class="ui-widget-header">Process and Equipment List</h1>
<div id="catalog">
<h2><a href="#">Conveyor</a></h2>
<div>
<ul>
<li>Belt Conveyor</li>
<li>Cart on Track Conveyor</li>
<li>Chain Conveyor</li>
<li>Chute Conveyor</li>
<li>Flat Belt Conveyor</li>

I am using drag and drop

$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});

First I would like to associate some text content against each element in the list. To be specific the text would be a structured query. I would like to be able to drag and drop elements from the list into a query box, which would dump the text (query) which is bound to the li element.

If for example we take "Belt Conveyor" from the above and drop it into the query box, some text which has been bound to the element would be pasted in to the query box instead of the text "Belt Conveyor".

Is this possible with drag and drop? If so can someone please guide me in the right direction please?

Thank you very much in advance.

Best

Lewis

Replies(4)

Adam Bodu..

Re: Combining binding and drag and drop

9 years ago

Trying to understand the intent of the drag-and-drop behavior here. So you have a list of products, and a search box. Is a search box just a regular text input? Is the idea to drag the text "Belt Conveyor" into the text input, and when dropped, different text displays in the text input?

lmcgib10

Re: Re: Combining binding and drag and drop

9 years ago

Hi Adam,
Thanks for response.

So you have a list of products, and a search box. Is a search box just a regular text input?

Yes, markup below

<textarea name="query" id="queryBox" cols="85" rows="20"

 placeholder="Drag and Drop items from the 'Process and Equipment List' list here... or type your SPARQL query!">

```
</textarea>
```

Is the idea to drag the text "Belt Conveyor" into the text input, and when dropped, different text displays in the text input?

Yes, exactly. Say for example I wanted to have the following text 'attached/bound' to the Belt Conveyor list item

```
SELECT ?title
```
```
WHERE{ 
```

<http://example.org/book/book1> <http://purl.org/dc/elements/1.1/title> ?title .

```
}   
```

I would like to drag the list item but drop the text into the textarea.
Any guidance on this would be really helpful. Thank you so much for taking the time to reply.

Adam Bodu..

Re: Combining binding and drag and drop

9 years ago

<html>
<head>
<title>DND</title>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
#query-drop {
display: inline-block;
}
</style>
<script type="text/javascript">
$(function() {
$( "#query-drop" ).droppable({
drop: function( e, ui ) {
$( this ).children( "textarea" )
.val( ui.draggable.data( "query" ) );
}
});
$( "#products > li" ).draggable({
helper: "clone"
});
});
</script>
</head>
<body>
<span id="query-drop">
<textarea name="query" id="queryBox" cols="85" rows="20" placeholder="Drag and Drop items from the 'Process and Equipment List' list here... or type your SPARQL query!"></textarea>
</span>
<div>
<ul id="products">
<li data-query="some belt conveyor query...">Belt Conveyor</li>
<li data-query="some cart on track conveyor query...">Cart on Track Conveyor</li>
<li data-query="some chain conveyor query...">Chain Conveyor</li>
<li data-query="some chute conveyor query...">Chute Conveyor</li>
<li data-query="some flat belt conveyor query...">Flat Belt Conveyor</li>
</ul>
</div>
</body>
</html>

lmcgib10

Re: Re: Combining binding and drag and drop

9 years ago

Wow. Thank you Adam. This is top notch. I can't thank you enough.

Top Reply

Response title

Attachments

jQuery Forum

Combining binding and drag and drop

Replies(4)

Re: Combining binding and drag and drop

Re: Re: Combining binding and drag and drop

Re: Combining binding and drag and drop

Re: Re: Combining binding and drag and drop

Statistics

Tags

Actions