trickery.net  

Go Back   trickery.net > Technical > Website Development

Reply
 
Thread Tools
Old 20-Jun-2018, 11:55   #1
BFH
Fixer of dead hard drives
BFH's Avatar
Join Date: Oct 2003
Location: The Final Frontier
Posts: 3,788
BFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond repute
Drag and drop to update records in Bootstrap

I've got 2 tables.

left hand is a list of addresses (obv with unique id's).

On the right is a list of contacts for each address when clicked.

What I'd like to do is to be able to "pick up" a contact on the right and drag/drop it onto a different address on the left and to issue a DB call with the associated contact id and address id of where it was released to update the DB with it's new address.

I've been playing around with the "sortable" functions in bootstrap and whilst it gives me the drag and drop element it obviously treats the address table as a destination table and so moves the row there. I don't want that, I want to have it "highlight" the address row (ideally) and then to fire off say an AJAX request with the relevant ID's to update the backend DB.

any ideas?
__________________
Elite Dangerous Current ship: Imperial Clipper,Cmdr Naughtius Maximus,Moto: fuck it
The BFH: http://www.andystoolkit.co.uk/thebfh.php
BFH is offline  
Reply With Quote
Old 22-Jun-2018, 08:02   #2
[RaG]Ethel
Alfa Male
[RaG]Ethel's Avatar
Join Date: Oct 2003
Location: Northumberland
Posts: 13,686
[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute[RaG]Ethel has a reputation beyond repute
just use jQuery ?

http://api.jqueryui.com/droppable/#event-drop
__________________
girls girls girls
[RaG]Ethel is offline  
 IaShDa 
Reply With Quote
Old 22-Jun-2018, 09:21   #3
BFH
Fixer of dead hard drives
BFH's Avatar
Join Date: Oct 2003
Location: The Final Frontier
Posts: 3,788
BFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond repute
sage advice.

Thats what i've actually ended up doing and it's working - ish.

I've got it to pick up the id being dragged and report that and the destination ID which is all I need "back end" wise to handle the DB stuff.

What I'd really like is to be able to have it "highlight" the row that's being hovered over.

I've switched to the idea of using div's rather than a table though for the rows because I think it will probably work better in the long run and tables can be a pain in the ass.

I've cobbled together this code which works but doesn't hightlight the actual div being hovered, rather then specific "highlighter" div (which isn't what i'm after really). I've tried to tweak it to use the currently hovered div (which on code demos online works) but adding the code to this mess just doesn't work so not sure what's going on tbh.

Code:
<!DOCTYPE html>
<html>

<head>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<style>


.highlight {
	background: red; /* make this whatever you want */
}
.highlighter_focus_in{border:1px solid #585858;background-color:#F7FE2E;}
.highlighter_focus_out{border:none;background-color:#fff;}


</style>


   	
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

    
</head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h1 class="panel-title">Addresses</h1>
            </div>
            
            <div id="addressid1" class="panel-body droparea box-container" style="border:1px solid #000000;margin:10px">
              
            </div>

            <div id="addressid2" class="panel-body droparea box-container" style="border:1px solid #000000;margin:10px">
              
            </div>

            <div id="addressid3" class="panel-body  droparea box-container" style="border:1px solid #000000;margin:10px">
              
            </div>
          </div>
        </div>
        <div class="col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h1 class="panel-title">Panel 2</h1>
            </div>
            <div id="highlighter">highlighter</div>
            <div id="container2" class="panel-body box-container">
              <div itemid="itm-1" class="btn btn-default box-item">Item 1</div>
              <div itemid="itm-2" class="btn btn-default box-item">Item 2</div>
              <div itemid="itm-3" class="btn btn-default box-item">Item 3</div>
              <div itemid="itm-4" class="btn btn-default box-item">Item 4</div>
              <div itemid="itm-5" class="btn btn-default box-item">Item 5</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
<script>
$(document).ready(function() {

  $('.box-item').draggable({
    cursor: 'move',
    helper: "clone",
    stack: false,
    cursor: "pointer",
  });
	
  $(".droparea").droppable({
   
	accept: ".box-item",
	over: function(event, ui) {
           $('#highlighter').addClass('highlighter_focus_in');
             $('#highlighter').removeClass('highlighter_focus_out');
        },
	out: function(event, ui) {
	   $('#highlighter').addClass('highlighter_focus_out');
		 $('#highlighter').removeClass('highlighter_focus_in');
	},    
	
	drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      var dropID = event.target.id;  // or $(this).attr("id"), or this.id
     
	  
	  
	  console.log(itemid + " dropped onto " + dropID);
	  
    }
  });



});



</script>
__________________
Elite Dangerous Current ship: Imperial Clipper,Cmdr Naughtius Maximus,Moto: fuck it
The BFH: http://www.andystoolkit.co.uk/thebfh.php
BFH is offline  
Reply With Quote
Old 22-Jun-2018, 16:08   #4
Tony.Montana
my other post is a smiley
Tony.Montana's Avatar
Join Date: Oct 2003
Location: West Midlands
Posts: 1,710
Tony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond repute
Use a codepen for code examples so we can actually see what you're trying to do.
Tony.Montana is offline  
Reply With Quote
Old 22-Jun-2018, 16:59   #5
BFH
Fixer of dead hard drives
BFH's Avatar
Join Date: Oct 2003
Location: The Final Frontier
Posts: 3,788
BFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond repute
This do then.....

https://jsfiddle.net/dp3rxva6/1/
__________________
Elite Dangerous Current ship: Imperial Clipper,Cmdr Naughtius Maximus,Moto: fuck it
The BFH: http://www.andystoolkit.co.uk/thebfh.php
BFH is offline  
Reply With Quote
Old 22-Jun-2018, 17:27   #6
Ned
each time i post god kills a kitten
Join Date: Dec 2003
Location: Brighton
Tournaments Won: 1
Posts: 4,479
Ned has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond reputeNed has a reputation beyond repute
https://jsfiddle.net/dp3rxva6/6/

There ya go (assuming I have understood what you are trying to do), there is a "hoverClass" property of droppable, I've just set that to your highlighter class (highlighter_focus_in) and commented out the other stuff in out: and Over: to avoid them conflicting.

Last edited by Ned; 22-Jun-2018 at 17:32.
Ned is offline  
 neddage 
Reply With Quote
Old 22-Jun-2018, 20:52   #7
Dingle
Dangle, Dongle.
Join Date: Oct 2003
Posts: 2,698
Dingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond reputeDingle has a reputation beyond repute
Bootstrap free help
Dingle is offline  
 dinglor 
Reply With Quote
Old 22-Jun-2018, 22:28   #8
BFH
Fixer of dead hard drives
BFH's Avatar
Join Date: Oct 2003
Location: The Final Frontier
Posts: 3,788
BFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond repute
Quote:
Originally Posted by Ned View Post
https://jsfiddle.net/dp3rxva6/6/

There ya go (assuming I have understood what you are trying to do), there is a "hoverClass" property of droppable, I've just set that to your highlighter class (highlighter_focus_in) and commented out the other stuff in out: and Over: to avoid them conflicting.
outstanding dude - nice one.

Although i'm pretty sure in my foaming at the mouth frustration I tried the same thing already but it wouldn't work. Baffled.

anyway - ta.
__________________
Elite Dangerous Current ship: Imperial Clipper,Cmdr Naughtius Maximus,Moto: fuck it
The BFH: http://www.andystoolkit.co.uk/thebfh.php
BFH is offline  
Reply With Quote
Old 22-Jun-2018, 22:30   #9
BFH
Fixer of dead hard drives
BFH's Avatar
Join Date: Oct 2003
Location: The Final Frontier
Posts: 3,788
BFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond repute
actually - I think i'd like it to remove the picked up "item" - so it appears to be removed from the list so the "user experience" makes more sense.

I know its possible as I saw it done with other code I was tinkering with it - presumably i'd add this to the drop function
__________________
Elite Dangerous Current ship: Imperial Clipper,Cmdr Naughtius Maximus,Moto: fuck it
The BFH: http://www.andystoolkit.co.uk/thebfh.php
BFH is offline  
Reply With Quote
Old 25-Jun-2018, 15:37   #10
BFH
Fixer of dead hard drives
BFH's Avatar
Join Date: Oct 2003
Location: The Final Frontier
Posts: 3,788
BFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond repute
Hmm - frustrating this.

I've put this in it's proper "home" and now when I drag a div the console sometimes reports its ID and other times reports it as "undefined". Sometimes I can drag a div the first time ok but then every drag after is "undefined" or othertimes it says "undefined" right from the start.

annoying
__________________
Elite Dangerous Current ship: Imperial Clipper,Cmdr Naughtius Maximus,Moto: fuck it
The BFH: http://www.andystoolkit.co.uk/thebfh.php
BFH is offline  
Reply With Quote
Old 29-Jun-2018, 12:23   #11
Tony.Montana
my other post is a smiley
Tony.Montana's Avatar
Join Date: Oct 2003
Location: West Midlands
Posts: 1,710
Tony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond reputeTony.Montana has a reputation beyond repute
Are you still working on this? You just need to add the line

Code:
ui.draggable.remove();
to your drop function. Like this: https://jsfiddle.net/dp3rxva6/23/
Tony.Montana is offline  
Reply With Quote
Old 29-Jun-2018, 22:55   #12
BFH
Fixer of dead hard drives
BFH's Avatar
Join Date: Oct 2003
Location: The Final Frontier
Posts: 3,788
BFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond reputeBFH has a reputation beyond repute
Yeah - nope, all sorted and yes - thats what I did.

Works great
__________________
Elite Dangerous Current ship: Imperial Clipper,Cmdr Naughtius Maximus,Moto: fuck it
The BFH: http://www.andystoolkit.co.uk/thebfh.php
BFH is offline  
Reply With Quote
Reply

Go Back   trickery.net > Technical > Website Development


Similar Threads
Thread Thread Starter Forum Replies Last Post
Drag & Drop Upload The Dark One Website Development 4 12-Dec-2008 09:58
drag & drop file uploading in PHP The Dark One Website Development 6 26-Sep-2006 09:09

Users Viewing Thread: 1 (0 members and 1 guests)
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 22:51.


Powered by vBulletin® Version 3.7.0 Release Candidate 3
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Copyright 2003 - 2013, trickery.net