how to make banner image draggable inside div then save position - php

Question

I've seen lots of questions and answers around how to do this but I am very stuck how I implement this into my webpage. I have a div named "banner" that contains an image drawn from a custom field that is on all my artist pages as a banner for each page. I would like to be able to drag this image inside the div and to save it's position. (I only want this function for myself, not visitors to the website) AKA Facebook page cover image.. This would allow me to add an image that is bigger than the div container to my custom field and for me to edit how this is showing inside the div.
This demonstates what I want to do- http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
but i don't understand where i put these codes in my wordpress files and how to make this work for me.. I only want this on my artist pages, and therefore using my single-artists.php template..
Here is my php code-
<?php
// artist download start
// if ( isset($_GET['download']) ) {
// header('Content-type: application/mp3');
// header('Content-Disposition: attachment; filename='.basename($_GET['download']));
// readfile( $_GET['download'] );
// }
// artist download end
get_header();
global $cs_transwitch,$prettyphoto_flag;
$prettyphoto_flag = "true";
$cs_artist = get_post_meta($post->ID, "cs_artist", true);
if ( $cs_artist <> "" ) {
$xmlObject = new SimpleXMLElement($cs_artist);
$cs_layout = $xmlObject->cs_layout;
$cs_sidebar_left = $xmlObject->cs_sidebar_left;
$cs_sidebar_right = $xmlObject->cs_sidebar_right;
}
if ( $cs_layout == "left" ) {
$cs_layout = "two-thirds column right";
$show_sidebar = $cs_sidebar_left;
}
else if ( $cs_layout == "right" ) {
$cs_layout = "two-thirds column left";
$show_sidebar = $cs_sidebar_right;
}
else $cs_layout = "sixteen columns left";
?>
<div id="banner">
<div id="bannercontent"><?php
list($src, $w, $h) = get_custom_field('banner:to_image_array');
?>
<img src="<?php print $src; ?>" width="100%" />
</div></div>
<script>$( "#bannercontent" ).draggable({
stop: function(){
alert('top offset: ' + $('#bannercontent').offset().top + ' left offset: ' + $('#bannercontent').offset().left);
}
});</script>
<div class="clear:both;"></div>
<div id="container" class="container row">
<div role="main" class="<?php echo $cs_layout;?>" >
<?php
/* Run the loop to output the post.
* If you want to overload this in a child theme then include a file
* called loop-single.php and that will be used instead.
*/
//get_template_part( 'loop', 'single_cs_artist' );
?>
<?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
<?php
//showing meta start
$cs_artist = get_post_meta($post->ID, "cs_artist", true);
if ( $cs_artist <> "" ) {
$xmlObject = new SimpleXMLElement($cs_artist);
$cs_layout = $xmlObject->cs_layout;
$cs_sidebar_left = $xmlObject->cs_sidebar_left;
$cs_sidebar_right = $xmlObject->cs_sidebar_right;
$artist_release_date = $xmlObject->artist_release_date;
$artist_social_share = $xmlObject->artist_social_share;
$artist_buy_amazon = $xmlObject->artist_buy_amazon;
$artist_buy_apple = $xmlObject->artist_buy_apple;
$artist_buy_groov = $xmlObject->artist_buy_groov;
$artist_buy_cloud = $xmlObject->artist_buy_cloud;
}
//showing meta end
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="heading"><?php the_title(); ?></h1>
<div class="in-sec">
<?php
// getting featured image start
$image_id = get_post_thumbnail_id ( $post->ID );
if ( $image_id <> "" ) {
//$image_url = wp_get_attachment_image_src($image_id, array(208,208),true);
$image_url = cs_attachment_image_src($image_id, 208, 208);
$image_url = $image_url;
//$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
$image_url_full = cs_attachment_image_src($image_id, 0, 0);
$image_url_full = $image_url_full;
}
else {
$image_url = get_template_directory_uri()."/images/admin/no_image.jpg";
$image_url_full = get_template_directory_uri()."/images/admin/no_image.jpg";
}
//$image_id = get_post_thumbnail_id ( $post->ID );
//$image_url = wp_get_attachment_image_src($image_id, array(208,198),true);
//$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
// getting featured image end
?>
<div class="light-box artist-tracks artist-detail <?php if($image_id == "") echo "no-img-found";?> ">
<div id="main-container">
<div id="leftcolumn">
<a rel="prettyPhoto" name="<?php the_title(); ?>" href="<?php echo $image_url_full?>" class="thumb" >
<?php echo "<img src='".$image_url."' />";?>
</a>
<br>
<br>
<div id="inpostgallery"><?php echo do_shortcode('[inpost_gallery thumb_width="104" thumb_height="104" post_id="' . get_the_ID() . '" thumb_margin_left="0" thumb_margin_bottom="0" thumb_border_radius="2" thumb_shadow="0 1px 4px rgba(0, 0, 0, 0.2)" js_play_delay="3000" id="" random="0" group="0" border="" type="yoxview" show_in_popup="0" artist_cover="" artist_cover_width="200" artist_cover_height="200" popup_width="800" popup_max_height="600" popup_title="Gallery"][/inpost_gallery]'); ?></div>
</div>
<div id="rightcolumn">
<div class="desc">
<p style="font-size:12px;"><span class="bold" style="text-transform:uppercase; color:#262626;"><?php _e('Categories', CSDOMAIN); ?> :</span>
<?php
/* translators: used between list items, there is a space after the comma */
$before_cat = " ".__( '',CSDOMAIN );
$categories_list = get_the_term_list ( get_the_id(), 'artist-category', $before_cat, ', ', '' );
if ( $categories_list ): printf( __( '%1$s', CSDOMAIN ),$categories_list ); endif; '</p>';
?>
</p>
<br>
<h5><?php print_custom_field('stars:formatted_list', array('<li><img src="http://www.entertaininc.co.uk/wp-content/uploads/2015/09/gold-star-graphic-e1441218522835.png">[+value+]</li>','<ul>[+content+]</ul>') );
?></h5><br />
<h2><strong>Price</strong> <?php print_custom_field('price'); ?></h2> <br />
<h2><strong>Location</strong> <?php echo do_shortcode('[gmw_post_info info="city, country" divider=","]'); ?></h2><br />
<h4><?php _e('Description', CSDOMAIN); ?></h4>
<div class='txt rich_editor_text'>
<?php
the_content();
?>
</div>
<div class="clear"></div>
<?php edit_post_link( __( 'Edit', CSDOMAIN ), '<span class="edit-link">', '</span>' ); ?>
</div></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="in-sec">
<div class="artist-opts">
<div class="share-artist">
<?php
$cs_social_share = get_option("cs_social_share");
if($cs_social_share != ''){
$xmlObject_artist = new SimpleXMLElement($cs_social_share);
if($artist_social_share == 'Yes'){
social_share();
}?>
<?php }?>
</div>
<?php if($artist_buy_amazon != '' or $artist_buy_apple != '' or $artist_buy_groov != '' or $artist_buy_cloud != ''){?>
<div class="availble">
<h4><?php if($cs_transwitch =='on'){ _e('Buy This',CSDOMAIN); }else{ echo __CS('buy_now', 'Buy This'); }?></h4>
<?php
if ( $artist_buy_amazon <> "" ) echo ' <a target="_blank" href="'.$artist_buy_amazon.'" class="amazon-ind"> <span>';if($cs_transwitch =='on'){ _e('Amazon',CSDOMAIN); }else{ echo __CS('amazon', 'Amazon'); } echo '</span></a> ';
if ( $artist_buy_apple <> "") echo ' <a target="_blank" href="'.$artist_buy_apple.'" class="apple-ind"> <span>'; if($cs_transwitch =='on'){ _e('Apple',CSDOMAIN); }else{ echo __CS('itunes', 'iTunes'); } echo '</span></a> ';
if ( $artist_buy_groov <> "") echo ' <a target="_blank" href="'.$artist_buy_groov.'" class="grooveshark-ind"> <span>'; if($cs_transwitch =='on'){ _e('GrooveShark',CSDOMAIN); }else{ echo __CS('grooveshark', 'GrooveShark'); } echo '</span></a> ';
if ( $artist_buy_cloud <> "") echo ' <a target="_blank" href="'.$artist_buy_cloud.'" class="soundcloud-ind"> <span>'; if($cs_transwitch =='on'){ _e('SoundCloud',CSDOMAIN); }else{ echo __CS('soundcloud', 'SoundCloud '); } echo '</span></a> ';
?>
</div>
<?php }?>
<div class="clear"></div>
</div>
</div>
<?php
foreach ( $xmlObject as $track ){
if ( $track->getName() == "track" ) {
?>
<div class="in-sec">
<?php
enqueue_alubmtrack_format_resources();
?>
<div class="artist-tracks light-box">
<?php
$counter = 0;
foreach ( $xmlObject as $track ){
$counter++;
if ( $track->getName() == "track" ) {
echo "<div class='track'>";
echo "<h5>";
echo $artist_track_title = $track->artist_track_title;
echo "</h5>";
echo "<ul>";
if ($track->artist_track_playable == "Yes") {
echo '
<li>
<div class="cp-container cp_container_'.$counter.'">
<ul class="cp-controls">
<li><a style="display: block;" href="#" class="cp-play" tabindex="1"> <span>'; if($cs_transwitch =='on'){ _e('Play',CSDOMAIN); }else{ echo __CS('play', 'Play'); } echo '</span></a></li>
<li> <span>'; if($cs_transwitch =='on'){ _e('Pause',CSDOMAIN); }else{ echo __CS('pause', 'Pause'); } echo '</span></li>
</ul>
</div>
<div style="width: 0px; height: 0px;" class="cp-jplayer jquery_jplayer_'.$counter.'">
<img style="width: 0px; height: 0px; display: none;" id="jp_poster_0">
<audio src="'.$track->artist_track_mp3_url.'" preload="metadata" ></audio>
</div>
<script>
jQuery(document).ready(function($){
var myCirclePlayer = new CirclePlayer(".jquery_jplayer_'.$counter.'",
{
mp3: "'.$track->artist_track_mp3_url.'"
}, {
cssSelectorAncestor: ".cp_container_'.$counter.'",
swfPath: "'.get_template_directory_uri().'/scripts/frontend/Jplayer.swf",
wmode: "window",
supplied: "mp3"
});
});
</script>
</li>
';
}
if ($track->artist_track_downloadable == "Yes"){ echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Download',CSDOMAIN); }else{ echo __CS('download', 'Download'); } echo '</span></li>'; }
if ($track->artist_track_lyrics <> "") { echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Lyrics',CSDOMAIN); }else{ echo __CS('lyrics', 'Lyrics'); } echo '</span></li>';}
if ($track->artist_track_buy_mp3 <> ""){ echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Buy Song',CSDOMAIN); }else{ echo __CS('buy_now', 'Buy Song'); } echo '</span></li>';}
echo "</ul>";
echo '
<div id="lyrics'.$counter.'" style="display:none;">
'.str_replace("\n","</br>",$track->artist_track_lyrics).'
</div>
';
echo "</div>";
}
}
?>
<div class="clear"></div>
</div>
</div>
<?php
}
}
?>
<div class="clear"></div>
<?php if ( get_the_author_meta( 'description' ) ) :?>
<div class="in-sec" style="margin-top:20px;">
<div class="about-author">
<div class="avatars">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'PixFill_author_bio_avatar_size', 53 ) ); ?>
</div>
<div class="desc">
<h5><?php _e('About', CSDOMAIN); ?> <?php echo get_the_author(); ?></h5>
<p class="txt">
<?php the_author_meta( 'description' ); ?>
</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<?php endif; ?>
</div>
<?php endwhile; endif; // end of the loop. ?>
<?php comments_template( '', true ); ?>
</div>
<?php if( $cs_layout != "sixteen columns left" and isset($show_sidebar) ) { ?>
<!--Sidebar Start-->
<div class="one-third column left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar($show_sidebar) ) : ?>
<?php endif; ?>
</div>
<!--Sidebar Ends-->
<?php }?>
<div class="clear"></div><!-- #content -->
</div><!-- #container -->
<div class="clear"></div>
<?php get_footer(); ?>

Answer 1

You need to use jQuery UI library (draggable) - https://jqueryui.com/draggable/
And then read the offset of the div or so

Answer 2

You also can use a jquery plugin named draggabilly. See the event dragMove or dragEnd. Hope it helps.